[JS]上传图片并预览
具体怎么用自行参考!
HTML部分
<img id="imgid">
<input type="file" name="file" onchange="imgPreview(this)">
JS部分
//上传预览
function imgPreview(fileDom) {
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
}
//获取文件
var file = fileDom.files[0];
var imageType = /(jpg|png|gif|JPG|PNG|GIF|jpeg|JPEG)/;
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
var size = file.size / 1024;
if (parseInt(size) > 2048) {
alert("图片大小超出2M");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("imgid");
//图片路径设置为读取的图片
img.src = e.target.result;
$(img).attr('src',img.src);
};
reader.readAsDataURL(file);
}
具体怎么用自行参考!
HTML部分
<img id="imgid"> <input type="file" name="file" onchange="imgPreview(this)">
JS部分
//上传预览 function imgPreview(fileDom) { //判断是否支持FileReader if (window.FileReader) { var reader = new FileReader(); } //获取文件 var file = fileDom.files[0]; var imageType = /(jpg|png|gif|JPG|PNG|GIF|jpeg|JPEG)/; if (!imageType.test(file.type)) { alert("请选择图片!"); return; } var size = file.size / 1024; if (parseInt(size) > 2048) { alert("图片大小超出2M"); return; } //读取完成 reader.onload = function(e) { //获取图片dom var img = document.getElementById("imgid"); //图片路径设置为读取的图片 img.src = e.target.result; $(img).attr('src',img.src); }; reader.readAsDataURL(file); }
评论列表