html5 本地图片预览

来源：互联网发布：java公司官网模板源码编辑：程序博客网时间：2024/04/29 04:28

在没有把图片提交到服务器之前，把图片的内容显示在客户端上

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>test</title></head><body>    <input type="file" accept="image/*" id="img"/>    <img id="showImg" alt="待显示的图片"/>    <script>        window.onload = function() {            var fileInput = document.getElementById('img');            fileInput.addEventListener('change', function(e) {                // 获取files                var files = e.target.files;                // 获取单个file                if (files && files.length) {                    var file = files[0];                    // 通过 window.URL 工具从 file 对象生成一个可用的 URL                    var URL = window.URL || window.webkitURL;                    var imgURL = URL.createObjectURL(file);                    // 显示                    document.getElementById('showImg').src = imgURL;                    setTimeout(function() {                        // 使用下面这句可以在内存中释放对此 url 的伺服                        URL.revokeObjectURL(imgURL);                        // 再次设置无效!                        document.getElementById('showImg').src = imgURL;                    }, 1000);                }            });        }    </script></body></html>

调用 URL.createObjectURL 的时候，浏览器自动在内存中开辟空间，用于伺服这个 URL，也就是使得这个 URL 可以请求成功；

参考资料:

http://www.huangwenchao.com.cn/2015/03/html5-image-preview.html

文章若有纰漏请大家补充指正,谢谢~~

http://blog.xinshangshangxin.com SHANG殇

0 0