本篇對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.圖片預覽功能的實現，這里又分兩種方法。
好了，到這里這篇就寫完了，希望對你有所幫助。