图片上传预览（URL.createObjectURL）

时间 2019-12-01

标签图片上传预览 url.createobjecturl url createobjecturl 栏目 HTTP/TCP 繁體版

原文原文链接

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

html

在线演示web

1、单张图片预览浏览器

<!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>

2、多张图片预览安全

<!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>

3、浏览器支持服务器

1. 上传图片预览
2. FileReader与URL.createObjectURL实现图片、视频上传预览
3. 上传图片实时预览
4. JS 上传图片先预览
5. 图片上传预览，兼容IE6，IE8
6. 图片预览+传参
7. 前端上传图片预览
8. input file上传图片预览
9. net 预览上传图片
10. HTML5 图片上传预览
更多相关文章...
• PHP 文件上传 - PHP教程
• Markdown 图片 - Markdown 教程
• Flink 数据传输及反压详解
• Tomcat学习笔记（史上最全tomcat学习笔记）

图片上传预览 （URL.createObjectURL）

图片上传预览（URL.createObjectURL）