下载地址http://download.csdn.net/detail/cometwo/9383602

兄弟文章：http://blog.csdn.net/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；
这一切都是客户端的事情，服务器端对此一无所知，包括你选择的这个图；
这个 imgURL 大概是这个样子：blob:http%3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb

input file上传图片预览相关推荐

  1. 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...

    本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...

  2. input file 上传图片及压缩

    input file 上传图片及压缩 大致需求为:可上传图片,同时压缩图片大小(因为手机图片一般都会有几兆,原图上传会耗损过多资源):并且可以上传之后显示出来 ,再提交给服务器: <input ...

  3. Java上传图片预览并通过后端压缩

    1.前端上传图片预览 <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  4. h5 调起相机_h5 调用相机、相册实现本地上传图片预览

    h5 本地上传图片预览 源码下载 最近做了一个项目就是上传一张自拍照, 根据颜值测试出不同的答案,并且可以生成一张图片. 拿到这需求的时候第一个反应就是想到了利用微信的图片上传接口, 因为我们需要拿到 ...

  5. 上传图片预览并在后台处理

    <a class="a-upload"><input type="file" name="fpic1" onchange= ...

  6. java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能

    filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...

  7. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后$("#fileAddPic&qu ...

  8. anguarjs 上传图片预览_JS控制上传图片个数，预览上传图片

    一共是2个函数 //这个函数的作用预览上传的图片 function fileView(filesObj){ //显示上传图片预览 var view=document.querySelector(&qu ...

  9. html元素拖拽预览图,HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blo ...

最新文章

  1. 机器学习基础知识详解！
  2. java的object如何转为具体的类_佛山个体户如何转为公司？
  3. 【Django】MTV(Django)模型
  4. 网易资深Java架构师：java数组对象转为list集合
  5. 平衡二叉树平衡因子怎么计算_数据结构PHP 平衡二叉树(AVL)的平衡原理
  6. 【Linux】文件操作函数(系统调用函数)
  7. 接口测试如何生成随机的参数值
  8. 学生管理数据库，及相关查询
  9. cocos 微信登陆失败（笔记）
  10. poj1066 Jugs
  11. [微信小程序] 单张、多张图片上传(图片转base64格式)实践经验
  12. Python:输入身份证号，计算出生日期、年龄、性别（源码+效果图）
  13. 宇宙最全面试题目实录（二）
  14. 加载、编辑和保存Wod格式所见所得的Word文档处理控件TX Text Control ActiveX
  15. 余弦相似性：找出相似文章
  16. 一. 知识图谱和金融领域简述
  17. 《SEM运营36计》第10计：笑里藏刀
  18. UnrealEngine源码下载
  19. Spring Cloud Discovery——Apache Zookeeper Discovery
  20. python支持wps_python程序的一个应用wps的实例

热门文章

  1. 设计模式：工厂方法模式（C++）【简单工厂进行升级】
  2. 线性表之顺序存储结构相关算法学习
  3. 关于年会抢红包游戏的一个思考
  4. 从零开始学习Docker
  5. Python sqlalchemy orm 多对多外键关联
  6. 设计模式之代理模式，学习笔记
  7. 什么是脏数据？怎样用箱形图分析异常值？终于有人讲明白了
  8. Ubuntu搭建tftp服务器
  9. ST-Link刷成J-Link
  10. STM32之中断嵌套控制器