使用html input標籤解決調用本地相冊中圖片上傳和預覽的問題

前些日子項目中遇到了一個問題（移動端項目），就是在反饋頁面點擊上傳圖片的時候，實如今本地讀取照片並預覽的效果，這樣的實現效果能夠避開把圖片上傳到服務器在預覽的尷尬，具體的頁面展現效果以下：

具體的代碼以下（偷個懶，也爲了你們看的更方便，就截圖了...）

在這裏面按鈕的呈現樣式是經過字體實現的，用的是阿里圖標庫，而後在圖標的上面就是圖中的input按鈕了，只是input給它全透明瞭，因此咱們看到的是一個"十"字的標誌，這裏面input的類型是file，accept是指上傳文件的類型，這裏面咱們能夠對要上傳的文件進行一些限制，由於上傳的是圖片，因此圖片的目錄是image，此外還有audio、video，可是如今尚未對文件類型進行限制，因此要在他們的後面加上（如圖片）.gif、.png等等，想省事，那就直接image/*了，這樣的話選擇的範圍也廣一些，固然，實際項目中仍是須要根據具體要求來作的，這一步作完以後，就會直接調用本地的文件夾了，Android效果以下：

蘋果手機效果以下：

蘋果手機的話是支持拍照的，Android不支持，效果出現以後，就是經過js代碼進行相應的操做了，代碼以下：

// 函數 從手機上導入預覽照片
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();//FileReader() 用於讀取文件
        reader.readAsDataURL(input.files[0]);//異步加載文件
        reader.onload = function (e) {
            $(".imgAddButton").before("<li><img src="+e.target.result+" /></li>");
            // 計算預覽照片數量
            $(".popUpImgTitle>span:last-child>i:first-child").html($(".popUpImgList>ul>li").length-1);
        }
    }
}
// 調用函數 從手機上導入預覽照片
$("#imgInp").change(function(){
    if (parseInt($(".popUpImgTitle>span:last-child>i:first-child").html()) < 4) {
        readURL(this);
    } else {
        mui.alert("圖片添加已達上限"," ");
    }
});

由於只能上傳四張圖片，因此我對其進行了一個判斷，主要的代碼還都是在readURL()函數裏面，其中$("#imgInp")是指點擊的那個徹底透明的input，input.files是指判斷是否上傳了文件，input.files[0]是指這個文件數組裏面的第一個，若是條件都爲真，那麼就建立一個FileReader() 實例，做用就是讀取文件用的，是文件的API，具體能夠參考這個網址 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader，其中readAsDataURL用於異步加載文件，加載完成以後經過onload()函數進行相關的操做，圖片的路徑是e.target.result獲取到，並把它座位img的src，好了，到此上傳圖片的功能就實現了，具體的效果以下：

可是如今上傳的方式是一張一張上傳的，不是太方便，後期再研究了，參考的網址有兩個，感謝他們的幫助

https://www.cnblogs.com/wuxiexy/p/6738928.html

http://blog.csdn.net/taohai123/article/details/53302405

轉載請註明出處，謝謝。