图片上传预览 （URL.createObjectURL）

知识预备：
1、 URL.createObjectURL() 静态方法会创建一个 DOMString，它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。
2、在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

在线演示

一、单张图片预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预览</title>
</head>
<body>
    <input type="file" id="file" multiple>
    <div id="preview">图片预览</div>
    <script>
        var preview = document.querySelector('#preview');
        var oFile = document.querySelector('#file');
        oFile.onchange = function(){
            var url = window.URL.createObjectURL(oFile.files[0]);
            // 创建预览图片
            var img = new Image();
            img.src = url;
            img.style.width = "80px";
            img.style.height = "80px";
            // 插入预览图片
            preview.appendChild(img);
          }
    </script>
</body>
</html>

 

二、多张图片预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预览</title>
</head>
<body>
    <input type="file" id="file" multiple>
    <div id="preview">图片预览</div>
    <script>
        var preview = document.querySelector('#preview');
        var oFile = document.querySelector('#file');
        oFile.onchange = function(){
            for(var i=0;i<oFile.files.length;i++){
                var url = window.URL.createObjectURL(oFile.files[i]);
                // 创建预览图片
                var img = new Image();
                img.src = url;
                img.style.width = "80px";
                img.style.height = "80px";
                // 插入预览图片
                preview.appendChild(img);                
            }
        }
    </script>
</body>
</html>

 三、浏览器支持

 

posted on 2016-11-09 12:47  百里登风  阅读(10705)  评论(0)  编辑  收藏  举报