1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;} 10 .ob{background:#ccc;padding:10px;} 11 .imgbox img{height:100px;width:100px;margin:10px;} 12 </style> 13 </head> 14 <body> 15 <div class="ob" id="od" draggable="true"> 16 <input type="file" id="file" multiple="multiple"> 17 </div> 18 <div class="imgbox"></div> 19 <script> 20 //获取文件url 21 function createObjectURL(blob){ 22 if (window.URL){ 23 return window.URL.createObjectURL(blob); 24 } else if (window.webkitURL){ 25 return window.webkitURL.createObjectURL(blob); 26 } else { 27 return null; 28 } 29 } 30 31 var box = document.querySelector(".imgbox"); //显示图片box 32 var file = document.querySelector("#file"); //file对象 33 var domFragment = document.createDocumentFragment(); //文档流优化多次改动dom 34 35 //触发选中文件事件 36 file.onchange = function(e){ 37 box.innerHTML =""; //清空上一次显示图片效果 38 e = e || event; 39 var file = this.files; //获取选中的文件对象 40 41 for(var i = 0, len = file.length; i < len; i++){ 42 var imgTag = document.createElement("img"); 43 var fileName = file[i].name; //获取当前文件的文件名 44 var url = createObjectURL(file[i]); //获取当前文件对象的URL 45 46 //忽略大小写 47 var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1); 48 var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1); 49 var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1); 50 51 //判断文件是否是图片类型 52 if(jpg || png || jpeg){ 53 imgTag.src = url; 54 domFragment.appendChild(imgTag); 55 }else{ 56 alert("请选择图片类型文件！"); 57 } 58 } 59 60 //最佳显示 61 box.appendChild(domFragment); 62 63 } 64 65 </script> 66 </body> 67 </html>