H5实现本地预览图片
我们使用H5可以很容易的实现图片上传前对其进行预览的功能
Html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UploadFile</title>
</head>
<body>
<div>
<img src="" id="img" style="width:200px;height:300px;" />
</div>
<input type="file" id="file" />
</body>
</html>实现预览功能的js代码如下：
<script type="text/javascript">
window.onload = function () {
var fileTag = document.getElementById('file');
fileTag.onchange = function () {
var file = fileTag.files[0];
var fileReader = new FileReader();
fileReader.onloadend = function () {
if (fileReader.readyState == fileReader.DONE) {
document.getElementById('img').setAttribute('src', fileReader.result);
}
};
fileReader.readAsDataURL(file);
};
};
</script>
预览效果如下：
最后注意一点，H5实现图片预览只能使用原生JS进行DOM元素的操作，若使用jQuery则无法实现该效果。
参考文章：
H5中的File对象 H5中的FileList对象 H5中的FileReader对象 在web应用中使用文件
版权声明
本文为作者原创，版权归作者雪飞鸿所有。 转载必须保留文章的完整性，且在页面明显位置处标明原文链接。
如有问题， 请发送邮件和作者联系。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-12-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
