本篇对input file进行了修改，改成自己需要的样式，类似验证身份上传身份证图片的功能。
效果图如下：
这里主要展示上传预览图片功能，对于删除功能的html及css写的比较粗糙,对于想要精细表现这块儿的可以在自己添加修改。
html代码
1 <!--点击预览图片--> 2 <div class="picDiv"> 3 <div class="addImages"> 4 <!--multiple属性可选择多个图片上传--> 5 <input type="file" class="file" id="fileInput" multiple accept="image/png, image/jpeg, image/gif, image/jpg" /> 6 <div class="text-detail"> 7 <span>+</span> 8 <p>点击上传</p> 9 </div> 10 </div> 11 </div>
这里需要注意下：如果在input file 标签里写成accept=“image/*”会造成点击按钮后等待时间稍长才会弹出选择文件框，所以写成
accept="image/png, image/jpeg, image/gif, image/jpg"
css代码
1 .imageDiv{ 2 display: inline-block; 3 width: 140px; 4 height: 125px; 5 -webkit-box-sizing: border-box; 6 -moz-box-sizing: border-box; 7 box-sizing: border-box; 8 border: 1px dashed darkgray; 9 background: #f8f8f8; 10 position: relative; 11 overflow: hidden; 12 } 13 .cover{ 14 position: absolute; 15 z-index: 1; 16 top: 0; 17 left: 0; 18 width: 140px; 19 height: 125px; 20 background-color: rgba(0,0,0,.3); 21 display: none; 22 line-height: 125px; 23 text-align: center; 24 cursor: pointer; 25 } 26 .cover>.delbtn{ 27 color: red; 28 font-size: 20px; 29 30 } 31 .imageDiv:hover .cover{ 32 display: block; 33 } 34 .addImages{ 35 display: inline-block; 36 width: 140px; 37 height: 125px; 38 -webkit-box-sizing: border-box; 39 -moz-box-sizing: border-box; 40 box-sizing: border-box; 41 border: 1px dashed darkgray; 42 background: #f8f8f8; 43 position: relative; 44 overflow: hidden; 45 } 46 .text-detail{ 47 margin-top: 40px; 48 text-align: center; 49 } 50 .text-detail>span{ 51 font-size: 40px; 52 } 53 .file{ 54 position: absolute; 55 top: 0; 56 left: 0; 57 width: 140px; 58 height: 125px; 59 opacity: 0; 60 }
里边的加号或者删除字样都可以用成字体或者图片，看自己公司需要。
javascript代码
第一种方式：createObjectURL
1 //图片上传预览功能 2 var userAgent = navigator.userAgent;//用于判断浏览器类型 3 $(".file").change(function () { 4 //获取选择图片的对象 5 var docObj =$(this)[0]; 6 var picDiv=$(this).parents(".picDiv"); 7 //得到所有的图片文件 8 var fileList = docObj.files; 9 //循环遍历 10 for (var i = 0; i < fileList.length; i++) { 11 //动态添加html元素 12 var picHtml="<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>" 13 picDiv.prepend(picHtml); 14 //获取图片imgi的对象 15 var imgObjPreview = document.getElementById("img"+fileList[i].name); 16 if (fileList && fileList[i]) { 17 //图片属性 18 imgObjPreview.style.display = 'block'; 19 imgObjPreview.style.width = '140px'; 20 imgObjPreview.style.height = '125px'; 21 //imgObjPreview.src = docObj.files[0].getAsDataURL(); 22 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式 23 if(userAgent.indexOf('MSIE') == -1){//IE以外浏览器 24 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径 25 }else{//IE浏览器 26 if(docObj.value.indexOf(",")!=-1){ 27 var srcArr=docObj.value.split(","); 28 imgObjPreview.src = srcArr[i]; 29 }else{ 30 imgObjPreview.src = docObj.value; 31 } 32 } 33 } 34 } 35 }); 36 /*删除功能*/ 37 $(document).on("click",".delbtn",function () { 38 console.log("click") 39 var _this=$(this); 40 _this.parents(".imageDiv").remove(); 41 });
这里有浏览器判断，因为IE和谷歌，火狐等浏览器不同，后两者对于文件路径有浏览器保护，不会显示全文件路径，而IE浏览器则没有，它完整的显示了文件路径，下图可看出。
谷歌浏览器:
IE浏览器:
还有另外一种方式，通过filereader方式预览图片。
JavaScript代码
第二种方式：filereader
1 $(".file").change(function () { 2 //获取选择图片的对象 3 var docObj =$(this)[0]; 4 var picDiv=$(this).parents(".picDiv"); 5 //得到所有的图片文件 6 var fileList = docObj.files; 7 for(var i=0;i<fileList.length;i++){ 8 var fr = new FileReader(); 9 var single=fileList[i]; 10 fr.onload = function(single) { 11 var picHtml = "<div class='imageDiv' > <img id='img" + single.name + "' src='" + single.target.result + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>" 12 picDiv.prepend(picHtml); 13 var imgObjPreview = document.getElementById("img" + single.name); 14 //图片属性 15 imgObjPreview.style.display = 'block'; 16 imgObjPreview.style.width = '140px'; 17 imgObjPreview.style.height = '125px'; 18 }; 19 fr.readAsDataURL(single); 20 } 21 }); 22 /*删除功能*/ 23 $(document).on("click",".delbtn",function () { 24 console.log("click") 25 var _this=$(this); 26 _this.parents(".imageDiv").remove(); 27 });
另外，删除功能的js代码可以如上面代码一样写在外边，也可以写在change事件for循环外，这样就不用on，可以直接以删除按钮的class来写了，如:
1 //图片上传预览功能 2 var userAgent = navigator.userAgent;//用于判断浏览器类型 3 $(".file").change(function () { 4 //获取选择图片的对象 5 var docObj =$(this)[0]; 6 var picDiv=$(this).parents(".picDiv"); 7 //得到所有的图片文件 8 var fileList = docObj.files; 9 //循环遍历 10 for (var i = 0; i < fileList.length; i++) { 11 //动态添加html元素 12 var picHtml="<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>" 13 picDiv.prepend(picHtml); 14 //获取图片imgi的对象 15 var imgObjPreview = document.getElementById("img"+fileList[i].name); 16 if (fileList && fileList[i]) { 17 //图片属性 18 imgObjPreview.style.display = 'block'; 19 imgObjPreview.style.width = '140px'; 20 imgObjPreview.style.height = '125px'; 21 //imgObjPreview.src = docObj.files[0].getAsDataURL(); 22 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式 23 if(userAgent.indexOf('MSIE') == -1){//IE以外浏览器 24 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径 25 }else{//IE浏览器 26 if(docObj.value.indexOf(",")!=-1){ 27 var srcArr=docObj.value.split(","); 28 imgObjPreview.src = srcArr[i]; 29 }else{ 30 imgObjPreview.src = docObj.value; 31 } 32 } 33 } 34 } 35 /*删除功能*/ 36 $(".delbtn").click(function () { 37 var _this=$(this); 38 _this.parents(".imageDiv").remove(); 39 }); 40 });
此篇主要体现了两点：
1.input file 按钮改成自己想要的样式，就是将原本的input隐藏，用另一个标签<a>，<button>,<div>......代替，css控制他们加上自己需要的样式就可以了；
2.图片预览功能的实现，这里又分两种方法。
好了，到这里这篇就写完了，希望对你有所帮助。
2480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
