基于jQuery 多图片上传前的预览，好东西赶紧记录下来，嘻嘻； 废话不多说，先看效果： 代码也很简单，由于引用了在线资源库，可以直接拷贝运行。
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h3>请选择图片文件：</h3> <!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传，是 html5 的新属性--> <form id="uploadForm" style="margin-top: 20px;" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="name">图片上传</label> <input type="file" name="file" id="file" multiple="multiple" class="form-control"> <br> <img src="" id="img" style="display: none"> </div> </form> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script> //生成类似于UUID的随机数 function _getRandomString(len) { len = len || 32; var $chars = 'ABCDEFGHIJKLMNPOQRSTUVWXYZabcdefghijkmnopqrstuvwxyz123456789'; var maxPos = $chars.length; var pwd = ''; for (i = 0; i < len; i++) { pwd += $chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } //预览图片 $(":file").change(function() { // getObjectURL是自定义的函数，见下面 // this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个 // ，但是这里只读取第一个 var fileList = this.files; var imgobj = $(this).next().next();//第一个img imgobj.nextAll(".addImg").remove(); //将后续添加的兄弟节点去掉再重新添加 for (var i = 0; i < fileList.length; i++) { var randrom = _getRandomString(32); var picHtml = '<img src="" class="addImg" id="img'+randrom+'" />'; var objUrl = getObjectURL(this.files[i]); imgobj.after(picHtml); $("#img"+randrom).attr("src", objUrl); } }); //建立一個可存取到該file的url function getObjectURL(file) { var url = null; // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } </script> </body> </html>记录下主要思想：
首先上传前的必备不能少，虽然此次没有实现上传功能：表单提交为post，声明enctype="multipart/form-data"以及文本框类型为file，另外需要多文件上传需要多声明一个multiple=“multiple”；目前表单声明一个隐藏的img标签（后续没有用到，有兴趣可以稍微优化下），再通过此标签动态的在后面添加img标签，在对其赋予一个可读取file的url，以达到显示多图片的效果；在谷歌和火狐浏览器亲测通过。对动态的img标签使用了一个类似于java UUID的随机字符串命名（为什么呢？），因为只是使用循环的***i***来声明img标签时，如果有两个文件上传按钮来上传多文件时会造成id重复，导致图片显示不出；当然上述代码没有这个问题，使用***i***来对img命名即可。目前发现个bug，就是在有两个上传文件时，先上传后面的图片，再上传前面的图片，会将后面的预览图删除，但文件还是存在的，如有上传不会不影响，留待后续有时间再来解决。
参考文章： https://blog.csdn.net/yqxllwy/article/details/52470636 http://www.jq22.com/webqd3746 https://blog.csdn.net/fengqingtao2008/article/details/41514159 https://www.cnblogs.com/weijieyun/p/6103829.html
