HTML5 檔案域+FileReader 讀取檔案(一)
阿新 • • 發佈:2018-12-17
在HTML5以前,HTML的檔案上傳域的功能具有很大的侷限性,這種侷限性主要體現在如下兩點:
- 每次只能選擇一個檔案進行上傳
- 客戶端程式碼只能獲取被上傳檔案的檔案路徑,無法訪問實際的檔案內容
一、FileList物件和File物件
HTML5為type='file' 的<input/>元素增加了兩個屬性。
- accept:該屬性控制允許上傳的檔案型別。該屬性為一個或多個MIME型別字串。多個MIME型別字串之間應以都好分割。
- multiple:該屬性設定是否允許選擇多個檔案
JavaScript可以通過files屬性訪問type='file'的<input/>元素生成的檔案上傳域的所有檔案,該屬性返回一個FileList物件,FileList物件相當於一個數組,開發者可以使用類似於陣列的方法來訪問該陣列內的每個File物件。
File物件是一個JavaScript物件,可以通過該物件獲取瀏覽器的所有檔案資訊。File物件包含如下屬性。
- name:返回該File物件對應的檔案的檔名, 不包括檔案路徑部分
- type:返回該File物件的檔案的MIME型別字串。
- size:返回該File物件的對應的檔案的大小,位元組單位
例項:
預覽圖片: <input id="images" type="file" multiple accept="image/*" /> <script type="text/javascript"> var imgInput = document.getElementById('images'); imgInput.onchange = function () { //1.獲取所有選中檔案列表 var fileList = imgInput.files; //2.遍歷顯示資訊 for (var i = 0; i < fileList.length; i++) { var file= fileList[i]; //一次讀取檔案的檔名,檔案型別,檔案大小 var div = document.createElement('div'); div.innerHTML = "第" + (i + 1) + "個檔案的檔名:" + file.name + ",檔案型別:" + file.type + ",檔案大小:" + file.size; //新增到 body中 document.body.appendChild(div); } } </script>
顯示結果:
提示:該檔案選擇框設定了accept='image/*'只顯示圖片。
不要靠accept屬性來過濾檔案型別,因為這只是客戶端的檔案型別過濾,這種檔案型別過濾是很脆弱的,如果開發者需要進行檔案上傳,則必須在伺服器端對檔案型別進行過濾。
二、使用FileReader讀取檔案內容
FileReader同樣是一個JavaScript物件,開發者可以通過該物件在客戶端讀取 檔案上傳域所選擇的檔案內容.關於FileReader
例項1:
<div> 讀取文字檔案: <input type="file" id="file1" /> </div> <div> 讀取為二進位制: <input type="file" id="file2" /> </div> <div> 讀取為DataURL: <input type="file" id="file3" accept="*" /> </div> <p id="result" style="width:100%;word-break:break-all;word-wrap:break-word;"></p> <script type="text/javascript"> //判斷瀏覽器是否支援FileReader物件 var reader if (FileReader) { reader = new FileReader(); } else { alert('您的瀏覽器不支援FileReader物件'); } //1.讀取為文字 var file1 = document.getElementById('file1'); file1.onchange = function () { var file = file1.files[0]; //判斷讀取的第一個檔案是否是文字檔案 if (/text\/\w+/.test(file.type)) { //以文字的方式讀取內容 reader.readAsText(file, 'gbk'); reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } else { alert('讀取的不是文字檔案'); } } //2.讀取為二級制 var file2 = document.getElementById('file2'); file2.onchange = function () { var file = file2.files[0]; //以二進位制流的方式讀取第一個檔案 //reader.readAsArrayBuffer(file); //返回二進位制陣列 reader.readAsBinaryString(file); //返回二進位制字串 reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } //3.讀取為DataURL var file3 = document.getElementById('file3'); file3.onchange = function () { var file = file3.files[0]; reader.readAsDataURL(file); reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } </script>
FileReader在讀取檔案的過程中可能多次觸發onprogress事件,通過該事件繫結監聽器即可實時監控檔案的讀取進度。
提示:FileReader只是客戶端的JavaScript物件,使用FileReader所進行的上傳也只是把磁碟上的檔案讀取到瀏覽器記憶體中,並未真正上傳到伺服器。如果需要真正把客戶端檔案上傳到伺服器,則可把檔案資料以POST請求方式提交到遠端伺服器,遠端伺服器負責接收檔案資料,並把資料內容儲存到伺服器。
例項2:
<div> 讀取二進位制檔案: <input type="file" id="file1" accept="*" /> </div> <div> 顯示進度: <progress id="pro" value="0"></progress> </div> <div id="result"></div> <script type="text/javascript"> var file1 = document.getElementById('file1'); file1.onchange = function () { var file = file1.files[0]; //讀取為二進位制 var reader = new FileReader(); reader.readAsBinaryString(file); //顯示進度 var pro = document.getElementById('pro'); pro.max = file.size; pro.value = 0; reader.onprogress = function (e) { pro.value = e.loaded; } reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } </script>