知识预备：
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. 关于xmpp协议发送消息，登录认证SSL报错的问题

    Q:错误描述如下 Traceback(most recent call last): File"/tails-share/features/scripts/otr-bot.py", ...

  2. python 学习笔记十五 django基础

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  3. css样式表（四）

    ******* CSS 常用属性 ********* [font] font 设置或检索对象中的文本特性.该属性是复合属性. 使用第一种声明方式参数必须按照如上的排列顺序,且font-size和fon ...

  4. awk中分隔符转换

    awk中分隔符转换的问题(转) 在awk中明明用OFS重新设置了分隔符,为什么在输出的时候还是原样输出呢! 他是这么写的:    echo 1,2,3,4 | awk 'BEGIN{FS=" ...

  5. web项目总结——通过jsp+servlet实现对oracle的增删改查功能

    1.DAO模式 分包:依次建立 entity:实体包,放的是跟oracle数据库中表结构相对应的对象的属性,也就是这个对象有什么 dao:增删改查接口,实现增删改查的具体方法 service:同dao ...

  6. spring.net学习（一） 搭建环境，实例化spring.net容器。

    1,使用nuget安装SPring.Core.安装这个的同时,会把Common.Logging,Common.Logging.Core也装上. 2,建立对象配置xml文件.如图Objects.xml. ...

  7. 剑指offer三: 斐波拉契数列

    斐波拉契数列是指这样一个数列: F(1)=1; F(2)=1; F(n)=F(n-1)+F(n); public class Solution { public int Fibonacci(int n ...

  8. Reactor事件驱动的两种设计实现：面向对象 VS 函数式编程

    Reactor事件驱动的两种设计实现:面向对象 VS 函数式编程 这里的函数式编程的设计以muduo为例进行对比说明: Reactor实现架构对比 面向对象的设计类图如下: 函数式编程以muduo为例 ...

  9. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  10. 集​群​t​o​m​c​a​t​+​a​p​a​c​h​e​配​置​文​档

    http://wenku.baidu.com/link?url=M_Lt07e-9KTIHucYgJUCNSxkjWThUuQ2P8axn8q6YmY_yQw7NmijQoDA2wKmi_FQUxwO ...