input file相關知識簡例
在此介紹的input file相關知識為： 上傳照片及文件，其中包括單次上傳、批量上傳、刪除照片、增加照片、讀取圖片、對上傳的圖片或文件的判斷，比如限制圖片的張數、限制圖片的格式、大小等。
在開發中，文件上傳必不可少，<input type="file" /> 是常用的上傳標簽，但特別low、瀏覽的字樣又不能換，但難不倒強迫症患者...看一些其他網站有的將<input type="file" />隱藏，用點擊其他的標簽（圖片等）來時實現選擇文件上傳功能，也有的將其設為透明，這里推薦后者，詳情請參考下面代碼。
此為本人寫的demo，更人性化的效果實現，供分享，不足之處望提議，將不勝感激
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .kuang{ 11 display: inline-block; 12 vertical-align: middle; 13 box-shadow: inset 0px 1px 20px 5px #ddd; 14 text-align: left; 15 margin-right: 20px; 16 margin-bottom: 20px; 17 width: 165px; 18 height: 165px; 19 } 20 .addhao{ 21 width: 165px; 22 height: 165px; 23 background: url(../img/add_photo_plus.png); 24 } 25 .on{ 26 display: inline-block; 27 text-align: left; 28 margin-right: 20px; 29 margin-bottom: 20px; 30 width: 165px; 31 height: 165px; 32 display: none; 33 position: relative; 34 overflow: hidden; 35 line-height: 200px; 36 } 37 .xian{ 38 width: 165px; 39 height: 165px; 40 position: absolute; 41 background-image: linear-gradient( 42 0deg, 43 rgba(0,0,0,0.7) 50%, 44 transparent 50% 45 ); 46 background-size: 165px 4px; 47 display: none; 48 z-index: 2; 49 } 50 .chahao{ 51 position: absolute; 52 width: 60px; 53 height: 60px; 54 background: url(../img/ico_02.png); 55 background-position: -171px -158px; 56 top: 52.5px; 57 left: 52.5px; 58 display: none; 59 z-index: 2; 60 } 61 .on img{ 62 width: 100%; 63 height: auto; 64 position: absolute; 65 left: 0; 66 right: 0; 67 top: 0; 68 bottom: 0; 69 margin:auto; 70 } 71 .kuang input{ 72 width: 164px; 73 height: 164px; 74 opacity: 0; 75 } 76 .button{ 77 width: 500px; 78 height: 36px; 79 margin: 0 auto; 80 81 } 82 .button .set{ 83 float: left; 84 width: 216px; 85 height: 36px; 86 background: #ddd; 87 text-align: center; 88 position: relative; 89 } 90 .set input{ 91 width: 216px; 92 height: 36px; 93 opacity: 0; 94 position: absolute; 95 top: 0; 96 left: 0; 97 } 98 .button .next{ 99 float: right; 100 width: 216px; 101 height: 36px; 102 background: red; 103 color: white; 104 } 105 .bigk{ 106 width: 1000px; 107 margin: 0 auto; 108 text-align: center; 109 } 110 </style> 111 <script src="branches/jquery-3.1.1.min.js"></script> 112 </head> 113 <body> 114 <div class="bigk"> 115 <div class="kuang"> 116 <div class="addhao"> 117 <input type="file" name="" class="fileinput"> 118 </div> 119 <div class="on"> 120 <div class="xian"></div> 121 <div class="chahao"></div> 122 </div> 123 </div> 124 <div class="kuang"> 125 <div class="addhao"> 126 <input type="file" name="" class="fileinput"> 127 </div> 128 <div class="on"> 129 <div class="xian"></div> 130 <div class="chahao"></div> 131 </div> 132 </div> 133 <div class="kuang"> 134 <div class="addhao"> 135 <input type="file" name="" class="fileinput"> 136 </div> 137 <div class="on"> 138 <div class="xian"></div> 139 <div class="chahao"></div> 140 </div> 141 </div> 142 <h3>上傳n張照片，生成屬於你的相冊</h3> 143 <p><span style="color:red;">限制條件：可自行增減設置；</span>如：支持jpg/png/jpeg格式，單張照片不大於20M，單次上傳不多於n張，請盡量上傳橫板照片</p> 144 <img src="../img/line_03.png" alt=""> 145 <div class="button" > 146 <a href=""><div class="set">批量上傳<input type="file" name="" multiple="multiple" id="piliang"></div></a> 147 <a href="#" class="next">限制張數</a> 148 </div> 149 </div> 150 </div> 151 </div> 152 <script> 153 // 單張上傳照片 刪除照片 154 $(" .fileinput").change(function () { 155 var file = this.files[0]; 156 readFile(file,$(this).parent().siblings(".on")); 157 }); 158 $(".on").mouseover(function () { 159 $(this).children(".xian").show(); 160 $(this).children(".chahao").show(); 161 162 }); 163 $(".on").mouseleave(function () { 164 $(this).children(".xian").hide(); 165 $(this).children(".chahao").hide(); 166 }); 167 $(".chahao").click(function () { 168 $(this).next().remove(); 169 $(".xian").hide(); 170 $(".chahao").hide(); 171 $(this).parent().hide(); 172 $(this).parent().siblings(".addhao").show(); 173 $(this).parent().siblings(".addhao").children().val(""); 174 175 }); 176 var on =document.querySelector(".on"); 177 // 需要把閱讀的文件傳進來file element是把讀取到的內容放入的容器 178 function readFile(file,element) { 179 // 新建閱讀器 180 var reader = new FileReader(); 181 // 根據文件類型選擇閱讀方式 182 switch (file.type){ 183 case 'image/jpg': 184 case 'image/png': 185 case 'image/jpeg': 186 case 'image/gif': 187 reader.readAsDataURL(file); 188 break; 189 } 190 // 當文件閱讀結束后執行的方法 191 reader.addEventListener('load',function () { 192 // 如果說讓讀取的文件顯示的話 還是需要通過文件的類型創建不同的標簽 193 switch (file.type){ 194 case 'image/jpg': 195 case 'image/png': 196 case 'image/jpeg': 197 case 'image/gif': 198 var img = document.createElement('img'); 199 img.src = reader.result; 200 element.append(img); 201 element.siblings(".addhao").hide(); 202 element.show(); 203 break; 204 } 205 }); 206 } 207 // 批量上傳部分 208 var piliang = document.querySelector('#piliang'); 209 var on = $(".on"); 210 piliang.addEventListener('change',function () { 211 for (var i = 0;i < this.files.length;i++){ 212 var file = this.files[i]; 213 on.eq(i).children(".chahao").next().remove(); 214 readFile(file,on.eq(i)); 215 } 216 }); 217 // 218 var on = $(".on"); 219 $(".next").click(function () { 220 for (var i = 0; i < 10; i++) { 221 console.log(on[i].childNodes.length); 222 if (on[i].childNodes.length==6){ 223 //這個判斷就是說明里面有多少個孩子，孩子不夠數，不會生成相冊 224 }else{ 225 alert("上傳照片不足3張"); 226 $(".next").attr("href","javascript:void(0)"); 227 return 228 } 229 $(".next").attr("href","生成相冊.html"); 230 } 231 }); 232 </script> 233 </body> 234 </html>
初始效果圖如下
點擊+號進行添加圖片效果圖如下
點擊+號添加完成單次上傳圖片效果圖如下
點擊批量進行上傳效果圖如下：
刪除上傳照片效果圖如下
當沒有滿足js中的設置要求，將不能提交
解析：
選擇文件：input：file 選擇本地文件，默認為單選，多選為multiple；
讀取文件：需要閱讀器 新建reader；
有關js這里用的是jq，在用此方法前，請將jq鏈接到頁面；