H5实现本地预览图片

本文转载自查看原文 2016-12-07 20:53 5607 Web/ 原创/ 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应用中使用文件

版权声明

本文为作者原创，版权归作者雪飞鸿所有。转载必须保留文章的完整性，且在页面明显位置处标明原文链接。

如有问题，请发送邮件和作者联系。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 H5图片预览功能 h5实现本地图片或文件的上传关于H5里的API，上传图片预览功能 createObjectURL方法实现本地图片预览 h5 实现调用系统拍照或者选择照片并预览 h5实现图片的裁剪（多页面）移动端H5选择本地图片在手机上预览自己的本地h5页面 FileReader本地预览图片移动端本地 H5 秒开方案探索与实现