您的位置：首页 > Web前端

js 实现前端图片上传，展示缩略图功能

2017-11-15 11:29 691 查看
原理：很简单，就是监听input file表单的onchange事件。

注意：方法在ie浏览器可以实现，但是在高级浏览器非IE，就会有fakepath，图片路径加密的问题，导致显示不出上传的图片。

解决方案：

引入 FileReader

FileReader API 地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReade

<!DOCTYPE html>
<html>
<head>
<title>文件上传图片，显示缩略图</title>
<style type="text/css">
div {
margin: 30px;
}
#mImg {
max-width: 100px;
}
</style>
</head>
<body>

<div>
<input id="mFile" type="file" name="file">
</div>
<div>
<img id="mImg" src="">
</div>

<script type="text/javascript">

document.getElementById('mFile').onchange = function (ev) {
//判断 FileReader 是否被浏览器所支持
if (!window.FileReader) return;

console.log(ev);

var file = ev.target.files[0];

if(!file.type.match('image/*')){
alert('上传的图片必修是png,gif,jpg格式的！');
ev.target.value = ""; //显示文件的值赋值为空
return;
}

var reader = new FileReader();  // 创建FileReader对象

reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果

reader.onload = function(e){
document.getElementById('mImg').src = e.target.result;
}

}

</script>
</body>
</html>


注意：浏览器的兼容性问题，请慎用~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  前端 解决方案 图片
相关文章推荐
新的分享
章节导航