淺談js本地圖片預覽

　　最近在工作中遇到一個問題，就是實現一個反饋頁面，這個反饋頁面的元素有反饋主題、反饋類型、反饋內容、反饋人聯系電話以及反饋圖片。前端將這些反饋的元素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結合：

//多文件與單文件的判斷，實現本地預覽
function   fileList(){
            var num = document.getElementById("selFile").files;
            if(num.length>1){
                for(var i=0;i<num.length;i++){
                    ImgPre(i);
                }
                return ;
            }
            else{
                ImgPre();
            }
    };
//文件本地預覽；涉及到設計默認值
function   ImgPre(){
    //var i = 0||arguments[0]，設置默認值，但是0比較特殊，會隱式轉換為false，所以只有對i進行判斷
    var  i = arguments[0];
    var oDiv = $('<index;div></div>').css({"display":"inline-block","position":"relative","width":"50px","height":"50px","padding":"0","margin":"0 0 0 10px"});
                   //創建img元素
                    var img = $('<img></img>');
                    img.attr('id',"imgPre").css({"width":"50px","height":"50px"});
                    //獲取圖片地址
                    if(!i){
                       //如果沒有傳入實參就是用默認值0
                        var url = window.URL.createObjectURL(document.getElementById("selFile").files[0]);
                    }else{
                        var url = window.URL.createObjectURL(document.getElementById("selFile").files[i]);
                    }
                    img.attr('src',url);
                    //取消選擇圖片
                    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()});
                    oDiv.append(icon);
                    oDiv.append(img);
                    $('.img_wrap').css("display","inline").append(oDiv);