js 原生图片上传

 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>