1 <html> 2 3 <head> 4 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 7 <title>测试页面</title> 8 9 <script type="text/javascript"> 10 //声明数组用于存放之前上传的图片路径，用于前端显示 11 var fileslist=new Array(); 12 //下面用于多图片上传预览功能 13 function setImagePreviews(avalue) { 14 15 var docObj = document.getElementById("doc"); 16 17 var dd = document.getElementById("dd"); 18 19 dd.innerHTML = ""; 20 21 var fileList = docObj.files; 22 23 for (var i = 0; i < fileList.length; i++) { 24 //数组追加 25 fileslist[fileslist.length]=window.URL.createObjectURL(docObj.files[i]); 26 27 } 28 //前端展示 29 fileslist.forEach( function(element, index) { 30 dd.innerHTML += "<div style='float:left' ><img id='img" + index + "' src='"+fileslist[index]+"' /> </div>"; 31 32 var imgObjPreview = document.getElementById("img"+index); 33 34 imgObjPreview.style.display = 'block'; 35 36 imgObjPreview.style.width = '150px'; 37 38 imgObjPreview.style.height = '180px'; 39 }); 40 41 return true; 42 43 } 44 45 46 47 </script> 48 49 </head> 50 51 52 53 <body> 54 55 <div style="margin :0px auto; 990px;"> 56 57 <input type="file" name="file" id="doc" multiple="multiple" style="150px;" onchange="javascript:setImagePreviews();" accept="image/jpg,image/jpeg,image/png" /> 58 59 <div id="dd" style=" 990px;"></div> 60 61 </div> 62 63 </body> 64 65 </html>