input file上传图片预览

input file上传图片预览其实很简单，只是没做过的感觉很神奇，今天我就扒下她神秘的面纱，其实原理真的非常非常非常非常非常非常简单！
点击红框是加载显示图片，X号删除，蓝框是自动在后面添加添加图片框，所有的都是原创，代码其实可以更加精简，看终结版文件
var srcs = getObjectURL(this.files[0]); //获取路径 $(this).nextAll(".img1").hide(); //this指的是input $(this).nextAll(".img2").show(); //fireBUg查看第二次换图片不起做用 $(this).nextAll(.close).show(); //this指的是input $(this).nextAll(".img2").attr("src",srcs); //this指的是input $(this).val(); //必须制空 $(".close").on("click",function() { $(this).hide(); //this指的是span $(this).nextAll(".img2").hide(); $(this).nextAll(".img1").show();
} else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file) return url
/* $(this).nextAll(".img22").attr("src",srcs); //this指的是input $(this).nextAll(".img22").show(); //fireBUg查看第二次换图片不起做用*/ var htmlImg= div + div + input type="file" / + span X /span + img src="btn.png" / + img src="+srcs+" / + /div + /div ; $(this).parent().parent().before(htmlImg); $(this).val(); //必须制空 $(this).parent().parent().prev().find(".img11").hide(); //this指的是input $(this).parent().parent().prev().find(.close1).show(); $(".close1").on("click",function() { $(this).hide(); //this指的是span $(this).nextAll(".img22").hide(); $(this).nextAll(".img11").show(); if($(.imgbox1).length 1){ $(this).parent().parent().remove(); /script /html

问题
加入我们在 HTML 里面有一个图片上传控件：

注意这个 accept=”image/*” 非常重要，它指定了上传的是图片，在移动端的时候会关联到系统的弹窗选择类型等问题，务必加上。

然后，问题是，我们在没有提交这个表单到服务器之前，有没有办法把图片的内容读取出来呢？

看似简单，都是客户端的文件，应该是可以的，但在之前确实没什么好办法，但是自从我们有了 HTML5

例子说明问题
复制代码

$(#upload_image).change(function(event) { // 根据这个 input 获取文件的 HTML5 js 对象 var files = event.target.files, file; if (files files.length 0) { // 获取目前上传的文件 file = files[0]; // 来在控制台看看到底这个对象是什么 console.log(file); // 那么我们可以做一下诸如文件大小校验的动作 if(file.size 1024 * 1024 * 2) { alert(图片大小不能超过 2MB!); return false; // !!!!!! // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL // 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; // 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); // 用这个 URL 产生一个 img 将其显示出来 $(body).append($( img/ ).attr(src, imgURL)); // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); });

复制代码
简要说明
简单来说整个操作设计如下几步：

通过 的 change 事件触发事件，并且获取 event 对象；
通过 event 对象获取上传的文件的 js 对象 file ；
通过 window.URL 工具从 file 对象生成一个可用的 URL；
把这个 URL 置入使用；
*释放这个 URL 的伺服
关键点：

对于同一个 file ，每次调用 URL.createObjectURL 的时候，都会重新生成一个不同的 URL；
调用 URL.createObjectURL 的时候，浏览器自动在内存中开辟空间，用于伺服这个 URL，也就是使得这个 URL 可以请求成功；
如果调用了 URL.revokeObjectURL(imgURL); 之后，这个伺服就会关掉，再请求这个 URL 就会 404；
这一切都是客户端的事情，服务器端对此一无所知，包括你选择的这个图；
这个 imgURL 大概是这个样子：blob:http%3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb

input file 设置文件选择类型 使用 accept 属性，accept 属性的值是一个包含一个或多个（用逗号分隔）这种唯一文件类型说明符的字符串。每个唯一文件类型说明符可以采用下列形式之一。
前端上传前预览文件image,text,json,video,audio 前天有个需求，上传前需要校验视频长度，然后让我出个 Demo。 预览文件 demo 其实预览功能实现上都差不多，所以今天我们都来实现一下咯。
HTML5的 input:file上传类型控制 原文:HTML5的 input:file上传类型控制 HTML5的 input:file上传类型控制 2014年8月29日 90820次浏览 一、input:file属性 属性值有以下几个比较常用： accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。