html多文件上传，可支持预览
Posted limn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html多文件上传，可支持预览相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单提交</title> 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 7 </head> 8 <body> 9 10 <!--文件上传--> 11 <form id="uploadForm" enctype="multipart/form-data"> 12 <div id="fileId" style=‘display: none‘><!--//style=‘display: none‘--> 13 14 </div> 15 <div id="img-con" class="panel panel-default imgdiv"> 16 17 18 </div> 19 <p id="em">未上传文件</p> 20 <input type="button" value="点击事件" name="点击事件" onclick="inputClieck()"><br> 21 <input type="submit"> 22 </form> 23 </body> 24 <script> 25 26 var inputArray = []; 27 28 function inputClieck() { 29 var newInput = document.createElement("input"); 30 newInput.type = ‘file‘; 31 newInput.name = "files"; 32 var idid = new Date().getTime(); 33 newInput.id = idid; 34 $("#fileId").append(newInput); 35 inputArray.push(idid); 36 37 $("#" + idid).click(); 38 39 40 $("#" + idid).change(function (e) { 41 console.log(‘change事件‘, e); 42 console.log(this) 43 var path= getImgPath(this.files[0]); 44 console.log("--------"+path); 45 46 var arr = path.split("/"); 47 var strPath=‘--------:null/‘+arr[arr.length-1]; 48 console.log(strPath) 49 var a=createImg(path,idid); 50 $("#em").append(a) 51 52 }); 53 var newline = document.createElement("br");//创建一个BR标签是为能够换行！ 54 $("#fileId").append(newline); 55 } 56 57 //动态显示上传图片 58 function uploadImg(path) { 59 var imgDiv = $("#img-con"); 60 var $img = $("<img/>"); 61 $img.attr("src", path); 62 imgDiv.append($img); 63 } 64 65 66 67 68 //获取要上传单张图片的本地路径 69 function getImgPath(file) { 70 71 72 var url = null; 73 if(window.createObjectURL != undefined) { // basic 74 url = window.createObjectURL(file); 75 } else if(window.URL != undefined) { // mozilla(firefox) 76 url = window.URL.createObjectURL(file); 77 } else if(window.webkitURL != undefined) { // webkit or chrome 78 url = window.webkitURL.createObjectURL(file); 79 } 80 return url; 81 } 82 83 84 85 86 function createImg(src,idid) { 87 var box = $("<div class=‘img-box uploadfile‘>"); 88 89 var newImg = document.createElement("img"); 90 newImg.src=src; 91 newImg.id="img"+idid; 92 newImg.height=100; 93 newImg.width=100; 94 newImg.onclick=‘showImagePopup(\"" + src + "\")‘; 95 96 //box.append("<img src=‘" + src + "‘ height=‘100px‘ width=‘100px‘ onclick=‘showImagePopup(\"" + src + "\")‘>"); 97 box.append(newImg); 98 return box; 99 } 100 101 function showImagePopup(src) { 102 if (getClass(src) === "String") { 103 var popup = $("<img></img"); 104 popup.addClass("image-popup").attr("src", src); 105 var shade = $("<div></div>").addClass("shade"); 106 $(document.body).append(shade.append(popup)); 107 shade.click(function () { 108 $(this).remove(); 109 }); 110 popup.fadeIn(200); 111 // popup.click(function() { 112 // window.event ? window.event.cancelBubble = true : 113 // window.event.stopPropagation(); 114 // }); 115 } 116 } 117 118 119 </script> 120 </html>
以上是关于html多文件上传，可支持预览的主要内容，如果未能解决你的问题，请参考以下文章
HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据)