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链接到页面；