FileReader是HTML5 File API的一部分。它實現了一種異步文件讀取機制。可以把FileReader想象為XMLHttpRequest,區別只是它讀取的是文件系統,而不是遠程服務器。為了讀取文件中的數據,FileReader提供了如下幾個方法。
<div id="wrapper"> <input id="fileUpload" type="file" multiple /><br /> <div id="image-holder"> </div></div>
$("#fileUpload").on('change', function () { //獲取上傳文件的數量 var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { // 循環所有要上傳的圖片 for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("你的瀏覽器不支持FileReader!"); } } else { alert("請選擇圖像文件。"); }});FileReader 可以支持 Internet Explorer 10+、FireFox,、Chrome 和Opera瀏覽器。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答