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

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

　　1、如何實現多張圖片上傳？

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

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

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

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

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

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

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

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

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

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

　　到這裏只是實現了多文件上傳以及文件上傳類型的限制的問題，接下來就是：

　　3、如何實現本地圖片預覽

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

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

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

 1 //多文件與單文件的判斷，實現本地預覽
 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                    //創建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                 

淺談js本地圖片預覽