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

　　頁面布局非常簡單，難就難在功能，如果沒有反饋圖片這個元素，那么功能實現(xiàn)就更簡單了，直接使用jquery中的$.ajax()方法提交表單數(shù)據(jù)給后臺接口；但是因為表單元素中多了反饋圖片這個元素，所以需要考慮到以下幾個問題：

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

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

　　2、上傳文件類型的限制？

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

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

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

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

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

　　console.log(fileType.indexOf(1)————? -1? 因為數(shù)組元素中沒有? 1? 這個元素，數(shù)組不會再次通過12，將12與1進行匹配

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

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

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

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

　　本地圖片預覽說白了就是顯示圖片，顯示圖片的實現(xiàn)就是創(chuàng)建一個img標簽，然后給img標簽的src屬性指定圖片的值，那是不是將本地圖片上的圖片相對地址傳入src屬性中就可以了呢？正常來說這沒有錯，因為我們在html文件中就是這么干的，<img? src="圖片相對于html文件的地址"/>就可以在html頁面制定的位置顯示圖片。但是在這里不行。為什么？因為這里是動態(tài)添加圖片，跟前面提到的靜態(tài)添加圖片不一樣。不過實現(xiàn)的思路還是一樣，就是指定圖片標簽的src屬性的值，只是這里需要對本地上傳的圖片的地址進行如下的處理：

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

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

1 //多文件與單文件的判斷，實現(xiàn)本地預覽 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 //文件本地預覽；涉及到設計默認值 15 function ImgPre(){ 16 //var i = 0||arguments[0]，設置默認值，但是0比較特殊，會隱式轉換為false，所以只有對i進行判斷 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 //如果沒有傳入實參就是用默認值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

轉載于:https://www.cnblogs.com/novice007/p/7751908.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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