知识预备：
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[]);

            // 创建预览图片

            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=;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>

三、浏览器支持

图片上传预览 （URL.createObjectURL）的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  3. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  4. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  5. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  7. html,图片上传预览，input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  8. js:s上次预览，上传图片预览，图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  10. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

随机推荐

  1. C++ STL中的 iterator 和 const_iterator

    我们在C++中使用STL的容器时,经常会用到迭代器.使用迭代器可以很方便的进行容器元素遍历和修改等操作. 近日,在使用Visual Studio 2015编程的时候发现,set的迭代器直接就是cons ...

  2. 给自己的XTC820摆拍一下。

    上个月入手了捷安特的XTC820,始终没有时间为爱车拍几张照,今天凑着在办公室的机会,就随手拍了几张,展示一下XTC820.先给大家看图片,然后再分享一下当初我买它的原因以及车的规格. 下面就来简单说 ...

  3. install intel c/c++ compiler

    通过在Intel官网上申请试用版本Intel® Parallel Studio XE Cluster Edition for Linux,会让你提交邮箱等信息,完成后会很快回复邮件,邮件会给出下载地址 ...

  4. Unity仪表盘显示UGUI制作小心得

    最近在做设备仪表参数参数显示,由于模型摆放位置经常修改,加之要求不能在模型的下面添加东西,显示界面的位置也不得不跟着修改,一来二去就烦了,想了解决办法,现在总结如下: 1.仍然在模型下面新建Panel ...

  5. Oracle建表

    1.oracle数据库中的多种数据结构: 1.表结构            存储数据 2.视图 一张表或多张表中数据的字节 3.sequence 主要用来生成主键值 4.index 提高检索性能 我们 ...

  6. MACS2 安装与使用

    1)下载MACS2 下载网址: https://pypi.python.org/pypi/MACS2 (有下载网址和安装.使用示例)   $ python setup.py install出现如下问题 ...

  7. MVC 外网 上传 下载 实现方式（一）

    本人在实现第三方文件存储时,为实现Web网络的上传和下载 的实现费了一些时间,然后总结到的一些问题: 如有思路狭隘之处还望指正! 文件上传时: 实现方式 为: 客户端=>第三方=>服务器( ...

  8. Javascript中的队列

    队列遵循FIFO (First In First Out)原则. 普通队列 function Queue() { var items=[]; //向队列尾部添加一个或者多个元素 this.enqueu ...

  9. Vue2随笔

    1. computed有缓存 methods没有缓存 慢慢更新中..... 2.Class与Style绑定 <div class="static" v-bind:class= ...

  10. php 判断当前的操作系统的方法

    因为windows 和 linux 下的标识符是不一样的,所以写了个方法来获取当前的标识符. /** * 对操作系统进行判断 * @return string */ static function j ...