html
<input type="file" value="上传文件" id="file"/>
<div>
<img src="" alt="" id="look">
</div>
css
#look{
width: 250px;
height: 250px;
border: 2px solid #ccc;
margin-top: 30px;
}
js
$('#file').change(function() {
//获取到file的文件
var docObj = document.getElementById("file");
//获取到预览框的文件
var imgObjPreview = document.getElementById("look");
//获取到文件名和类型
if(docObj.files && docObj.files[0]) {
console.log(docObj.files)
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch(e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
document.selection.empty();
}
return true;
})
图片上传显示缩略图
最新推荐文章于 2020-06-02 11:19:41 发布