最近在工作中遇到一個(gè)問(wèn)題，就是實(shí)現(xiàn)一個(gè)反饋?lái)?yè)面，這個(gè)反饋?lái)?yè)面的元素有反饋主題、反饋類(lèi)型、反饋內(nèi)容、反饋人聯(lián)系電話(huà)以及反饋圖片。前端將這些反饋的元素POST給后臺(tái)提供的接口；實(shí)現(xiàn)這個(gè)工作的步驟就是：頁(yè)面布局——功能實(shí)現(xiàn)；

　　頁(yè)面布局非常簡(jiǎn)單，難就難在功能，如果沒(méi)有反饋圖片這個(gè)元素，那么功能實(shí)現(xiàn)就更簡(jiǎn)單了，直接使用jquery中的$.ajax()方法提交表單數(shù)據(jù)給后臺(tái)接口；但是因?yàn)楸韱卧刂卸嗔朔答亪D片這個(gè)元素，所以需要考慮到以下幾個(gè)問(wèn)題：

　　1、如何實(shí)現(xiàn)多張圖片上傳？

　　<input? type="file"? ?multiple/>文件上傳的實(shí)現(xiàn)是指定input框的type屬性（type=file包括multiple屬性都是H5提供的功能）但是在這個(gè)實(shí)際場(chǎng)景中，要實(shí)現(xiàn)的是上傳圖片，除了圖片之外的其他文件都不能上傳。所以就有了第2 個(gè)問(wèn)題：

　　2、上傳文件類(lèi)型的限制？

　　文件類(lèi)型限制的實(shí)現(xiàn)方式我在反饋?lái)?yè)面中用的是數(shù)組的indexOf()方法，首先列出圖片有哪些類(lèi)型，通俗講就是圖片有那些后綴名，如下：

　　var? ?fileType = ["jpg","jpeg","png","bmp","gif"];目前我能想到的常用的圖片類(lèi)型就這么多。

　　其次，獲取到選中圖片的type=file輸入框的值，在這個(gè)值中按照split(".")拆分成數(shù)組，最后.pop()將文件后綴名從數(shù)組中刪除，這個(gè)方法會(huì)返回刪除的元素。如下：

　　var? ?type = document.getElementById("input[type='file']").innerHTML.split(".").pop();

　　fileType.indexOf(type.toLocaleLowerCase())!=-1? ? ?就表明選中的文件是圖片。注意：數(shù)組的indexOF()方法使用的是===嚴(yán)格等于，也就是匹配值type必須跟fileType數(shù)組中的元素的類(lèi)型以及值完全相等才可以。例如var? fileType = ["index","of",12];?

　　console.log(fileType.indexOf(1)————? -1? 因?yàn)閿?shù)組元素中沒(méi)有? 1? 這個(gè)元素，數(shù)組不會(huì)再次通過(guò)12，將12與1進(jìn)行匹配

　　console.log(fileType.indexOf(12)———— 2 返回匹配元素的下標(biāo)

　　console.log(fileType.indexOf("index") ————? 0 返回匹配的元素的下標(biāo)

　　到這里只是實(shí)現(xiàn)了多文件上傳以及文件上傳類(lèi)型的限制的問(wèn)題，接下來(lái)就是：

　　3、如何實(shí)現(xiàn)本地圖片預(yù)覽

　　本地圖片預(yù)覽說(shuō)白了就是顯示圖片，顯示圖片的實(shí)現(xiàn)就是創(chuàng)建一個(gè)img標(biāo)簽，然后給img標(biāo)簽的src屬性指定圖片的值，那是不是將本地圖片上的圖片相對(duì)地址傳入src屬性中就可以了呢？正常來(lái)說(shuō)這沒(méi)有錯(cuò)，因?yàn)槲覀冊(cè)趆tml文件中就是這么干的，<img? src="圖片相對(duì)于html文件的地址"/>就可以在html頁(yè)面制定的位置顯示圖片。但是在這里不行。為什么？因?yàn)檫@里是動(dòng)態(tài)添加圖片，跟前面提到的靜態(tài)添加圖片不一樣。不過(guò)實(shí)現(xiàn)的思路還是一樣，就是指定圖片標(biāo)簽的src屬性的值，只是這里需要對(duì)本地上傳的圖片的地址進(jìn)行如下的處理：

　　var? url = window.URL.createObjectURL(選中的圖片)//不兼容IE。將本地圖片的地址進(jìn)行一種處理。

下面是我的實(shí)現(xiàn)本地圖片預(yù)覽的代碼，這代碼是原生js與jquery結(jié)合：

1 //多文件與單文件的判斷，實(shí)現(xiàn)本地預(yù)覽 2 function fileList(){ 3 var num = document.getElementById("selFile").files; 4 if(num.length>1){ 5 for(var i=0;i<num.length;i++){ 6 ImgPre(i); 7 } 8 return ; 9 } 10 else{ 11 ImgPre(); 12 } 13 }; 14 //文件本地預(yù)覽；涉及到設(shè)計(jì)默認(rèn)值 15 function ImgPre(){ 16 //var i = 0||arguments[0]，設(shè)置默認(rèn)值，但是0比較特殊，會(huì)隱式轉(zhuǎn)換為false，所以只有對(duì)i進(jìn)行判斷 17 var i = arguments[0]; 18 var oDiv = $('<index;div></div>').css({"display":"inline-block","position":"relative","width":"50px","height":"50px","padding":"0","margin":"0 0 0 10px"}); 19 //創(chuàng)建img元素 20 var img = $('<img></img>'); 21 img.attr('id',"imgPre").css({"width":"50px","height":"50px"}); 22 //獲取圖片地址 24 if(!i){ 25 //如果沒(méi)有傳入實(shí)參就是用默認(rèn)值0 26 var url = window.URL.createObjectURL(document.getElementById("selFile").files[0]); 27 }else{ 28 var url = window.URL.createObjectURL(document.getElementById("selFile").files[i]); 29 } 30 img.attr('src',url); 31 //取消選擇圖片 32 var icon = $('<i class="remove iconcel">&#xe624;</i>').css({"position":"absolute","top":"-5px","right":"0","z-index":"999","display":"blcok","background":"red","color":"#fff","border-radius":"50%"}).click(function(){$(this).parent().remove()}); 33 oDiv.append(icon); 34 oDiv.append(img); 35 $('.img_wrap').css("display","inline").append(oDiv); 36 37

轉(zhuǎn)載于:https://www.cnblogs.com/novice007/p/7751908.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的浅谈js本地图片预览的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。