用html5文件api實現移動端圖片上傳&預覽效果

想要用h5在移動端實現圖片上傳&預覽效果，首先要了解html5的文件api相關知識（全部api只列舉本功能所需）:

 

1.Blob對象 

Blob表示原始二進制數據,Html5的file對象就繼承於它，它提供如下屬性：

 

type：mime類型,若是是未知類型則返回一個空字符串

size：Blob對象的字節長度

 

2.input(type=「file」)控件與file&FileList對象

<input type="file" accept="image/*」 multiple id=「file"/>

見上述代碼：

multiple：表示file控件容許一次放置多個文件

accept：用來讓input只能接受某種類型的文件，可是目前主流瀏覽器對其的支持都只侷限於打開文件選擇窗口時，默認選擇圖片文件而已，若是其餘類型文件，file控件也能正常接受。因此要單獨加判斷：

 

input file控件有以下兩個屬性：

name:文件名，不包含路徑(悲催的是iphone返回的文件名都是image.***)

lastModifiedDate:文件的最後修改日期

 

file：控件內用戶選擇的每個文件都是一個file對象

FileList:爲file對象的列表，訪問方法以下：

var files = document.getElementById("file").files

判斷代碼以下：

for(var k=0;k<files.length;k++){

    if(!/image\/\w+/.test(files[k].type)){

       alert(files[k].name+"不是圖像文件!");

    }else{

       //此處可加入文件上傳的代碼

       alert(files[k].name+"文件已上傳」)       

    }

}

 

3.FileReader接口

Filereader接口主要用於把文件讀入內存，而且讀取文件中的數據，FileReader接口提供了一個異步接口(用於在瀏覽器主線程中異步訪問文件系統)，瀏覽器對FileReader的能力檢測代碼以下：

 

if(typeof FileReader == undefined) {

    div.innerHTML = "不支持filereader";

}else{

    div.innerHTML = "FileReader is ok」;

}

 

FileReader的方法

readAsDataURL:將文件讀取爲DataURL(base64最爲常見)

FileReader的狀態

onabort 數據讀取中斷

onerror 數據讀取出錯

onloadstart 開始讀取數據

onprogress 讀取中

onload 讀取成功時觸發

onloadend 數據讀取完成，不管成功失敗都觸發

在各類方法中，this.result指向讀取的文件數據

 

4.本功能核心代碼以下：

<input type="file" accept="image/*" ref="file" onChange={ctr.onchange} multiple/>

<script>    
    if(typeof FileReader == undefined&&new            FileReader().readAsDataURL) {
        alert("不支持filereader");
    }else{
        var img = document.createElement("img");
        document.body.appendChild(img);
        var reader = new FileReader();
        input = document.getElementById("file");
        var onchange = function(){
            var files = input.files;
            for(var k=0;k<files.length;k++){
                if(!/image\/\w+/.test(files[k].type)){
                    console.log(files[k].name+"不是圖像文件!");
                }else{
                    //此處可加入文件上傳的代碼
                    console.log(files[k].name+"文件已上傳")
                }
             }
            reader.readAsDataURL(files[0]);
            reader.onload = function(){
                img.src = this.result;
            }           
        }
        input.onchange = onchange;
    }
</script>

 

 

 

很簡單的感受吧^_^

 

5.手機瀏覽器能力測試結果：

用手邊的作了下功能支持的能力測試，結果以下，仍是很樂觀的哦～