利用HTML5 file api讀取圖片進行本地操做

需求場景：須要用戶上傳一張照片，返回給用戶一個惟一的結果，好比測試類網頁你擁有哪一種女人氣質？（移動端）
其實這種需求（不須要保存圖片）的話，只須要在本地處理圖片便可，不須要將圖片上傳到服務器。計算圖片的md5值能夠確保惟一性。
針對這個需求，能夠使用HTML5 file api來讀取文件。實現方法以下：

document.getElementById("file").addEventListener("change", function() {
    var fileReader = new FileReader(), box = document.getElementById('box'),
    //建立md5對象（基於SparkMD5）
    spark = new SparkMD5();
    //每塊文件讀取完畢以後的處理
    fileReader.onload = function(e) {
        console.log("finished loading");
        $('#box').append('<img src="'+e.target.result+'">');
        console.info("計算的Hash", spark.end());
    };
});

demo:
http://jsbin.com/zoputihuqe/edit?html,css,js,output

JS Bin on jsbin.com<script src="http://static.jsbin.com/js/embed.min.js?3.36.10"></script>

以前作的一個活動頁面，上傳照片測氣質，只在本地操做圖片，並根據MD5值返回惟一結果：