?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多文件上传,可支持预览
原文地址:https://www.cnblogs.com/limn/p/10793686.html