图片上传预览（URL.createObjectURL）

最新推荐文章于 2024-04-25 16:09:54 发布

weixin_30788731

最新推荐文章于 2024-04-25 16:09:54 发布

阅读量174

点赞数

原文链接：http://www.cnblogs.com/bldf/p/6046529.html

版权

知识预备：
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>

三、浏览器支持

转载于:https://www.cnblogs.com/bldf/p/6046529.html

weixin_30788731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传预览（URL.createObjectURL）

知识预备：1、 URL.createObjectURL()静态方法会创建一个DOMString，它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的document绑定。2、在每次调用createObjectURL()方法时，都会创建一个新的URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用URL.revo...
复制链接

扫一扫