前端多图上传+追加图片 

 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; width:990px;">
56 
57 <input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/jpg,image/jpeg,image/png" />
58 
59 <div id="dd" style=" width:990px;"></div>
60 
61 </div>
62 
63 </body>
64 
65 </html>

 

posted @ 2017-04-17 17:43  慶哥  阅读(366)  评论(0)    收藏  举报