300字范文 > input file上传图片预览

input file上传图片预览

时间：2018-11-11 02:43:13

相关推荐

input file上传图片预览

下载地址/detail/cometwo/9383602

兄弟文章：/libin_1/article/details/50916704

input file上传图片预览其实很简单，只是没做过的感觉很神奇，今天我就扒下她神秘的面纱，其实原理真的非常非常非常非常非常非常简单！

点击红框是加载显示图片，X号删除，蓝框是自动在后面添加添加图片框，所有的都是原创，代码其实可以更加精简，看终结版文件

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="jquery-1.11.1.min.js"></script><style type="text/css">.imgbox,.imgbox1{float: left;margin-right: 20px;margin-top: 20px;position: relative;width: 182px;height: 142px;border: 1px solid red;overflow: hidden;}.imgbox1{border: 1px solid blue;}.imgnum{left: 0px;top: 0px;margin: 0px;padding: 0px;}.imgnum input,.imgnum1 input {position: absolute;width: 182px;height: 142px;opacity: 0;}.imgnum img,.imgnum1 img {width: 100%;height: 100%;}.close,.close1 {color: red;position: absolute;left: 170px;top: 0px;display: none;}</style></head><body><div id="img"><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div> <div class="imgbox"><div class="imgnum"><input type="file" class="filepath" /><span class="close">X</span><img src="btn.png" class="img1" /><img src="" class="img2" /></div></div><div class="imgbox1"><div class="imgnum"><input type="file" class="filepath1" /><span class="close1">X</span><img src="btn.png" class="img11" /><img src="" class="img22" /></div></div></div></body><script type="text/javascript">$(function() {$(".filepath").on("change",function() {alert($('.imgbox').length);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();})})})function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) {url = window.createObjectURL(file)} else if (window.URL != undefined) {url = window.URL.createObjectURL(file)} else if (window.webkitURL != undefined) {url = window.webkitURL.createObjectURL(file)}return url};$(function() {$("#img").on("change",".filepath1",function() {//alert($('.imgbox1').length);var srcs = getObjectURL(this.files[0]); //获取路径alert(srcs);//this指的是input/* $(this).nextAll(".img22").attr("src",srcs); //this指的是input$(this).nextAll(".img22").show(); //fireBUg查看第二次换图片不起做用*/var htmlImg='<div class="imgbox1">'+'<div class="imgnum1">'+'<input type="file" class="filepath1" />'+'<span class="close1">X</span>'+'<img src="btn.png" class="img11" />'+'<img src="'+srcs+'" class="img22" />'+'</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

例子说明问题

复制代码

$(function() {$('#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 生成目标 urlvar 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；