学习File API用于前端读取文件
1. File API簡(jiǎn)介
File API對(duì)于某些專門的網(wǎng)站的不可或缺的。現(xiàn)在常用它實(shí)現(xiàn)對(duì)文件的預(yù)覽等功能。
File API規(guī)定怎么從硬盤上提取文件，直接交給在網(wǎng)頁中運(yùn)行中的Javascript代碼。然后代碼可以打開文件探究數(shù)據(jù)，無論是本地文件還是其他文件。注意，關(guān)鍵在于文件會(huì)被直接交給JavaScript代碼，它并不能修改文件，也不能創(chuàng)建新文件，想要保存任何數(shù)據(jù)，需要將數(shù)據(jù)發(fā)送到服務(wù)器或者保存在本地存儲(chǔ)空間中。
2. 讀取文件
在通過File API操作文件之前，首先必須取得文件。使用File API可以直接讀取文本文件的內(nèi)容。
例如：
上圖中，選擇一個(gè)文件，無需上傳，網(wǎng)頁中的javascript代碼就能取得文本文件，把內(nèi)容復(fù)制到頁面中。
readAsText()方法只能處理文本內(nèi)容的文件，如CSV格式，XML格式，.docx格式和.xlsx格式的文件。
readAsText()方法只是眾多讀取文件的方法之一，還有readAsBinaryStrng(),readAsDataURL()和readAsArrayBuffer().
- readAsBinaryStrng()方法可以讓應(yīng)用處理二進(jìn)制編碼的數(shù)據(jù)，但基本上就是把數(shù)據(jù)保存在一個(gè)文本字符串中，效率不高。
- readAsArrayBuffer()是對(duì)于做數(shù)據(jù)處理較好的選擇，這個(gè)方法將數(shù)據(jù)讀到一個(gè)數(shù)組中，每個(gè)數(shù)組項(xiàng)代表一字節(jié)數(shù)據(jù)。這套方案的優(yōu)勢(shì)是可以用來創(chuàng)建大塊數(shù)據(jù)，然后切分成更小的二進(jìn)制數(shù)據(jù)塊，以便逐塊處理。
- readAsDataURL()方法則讓我們能方便地取到圖片數(shù)據(jù)。
2.1 一次讀取多個(gè)文件
HTML5也支持一次提交多個(gè)文件，只要為<input>元素添加multiple屬性即可：
<input type="file" id="Files" name="files[]" multiple /> <div id="Lists"></div> function fileSelect(e) { e = e || window.event; var files = e.target.files; //FileList Objects var output = []; for(var i = 0, f; f = files[i]; i++) { output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size +' bytes</li>'); } document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>'; } if(window.File && window.FileList && window.FileReader && window.Blob) { document.getElementById('Files').addEventListener('change', fileSelect, false); } else { document.write('您的瀏覽器不支持File Api'); }由以上代碼可以看到，html5為file這個(gè)dom元素新增了files接口（e.target指向了file input元素，實(shí)際上也可以用this來訪問，即this.files），得到的就是FileList，通過遍歷該集合，即可訪問到各個(gè)已選擇的文件對(duì)象。
2.2 通過拖拽讀取圖片文件
前面我們看到，FileReader處理文本內(nèi)容只需要一步，同樣，處理圖片內(nèi)容也這么簡(jiǎn)單，而這就要?dú)w功于readAsDataURL()方法。
下面的例子中，讓用戶把圖片拖到頁面中，然后在圖片上繪制。
下面是HTML和css代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>拖拽圖片</title><style>#dropBox {margin: 15px;width: 300px;height: 300px;border:5px dashed grey;border-radius: 8px;background: lightyellow;background-size: 100%;background-repeat: no-repeat;text-align: center;}#dropBox div{margin: 100px 70px;color: orange;font-size: 25px;}</style> </head><body><div id="dropBox"><div>將你的圖片拖到此處</div></div> </body> </html>為處理放置文件的操作，需要處理三個(gè)事件：onDragEnter、onDragOver、onDrop。頁面一加載完成，就會(huì)為這三個(gè)事件添加處理程序。
var dropBox; window.onload = function() {dropBox = document.getElementById("dropBox");dropBox.ondragenter = ignoreDrag;dropBox.ondragover = ignoreDrag;dropBox.ondrop = drop; }其中，ignoreDrag()函數(shù)同時(shí)處理onDragEnter和onDragOver事件，前者在鼠標(biāo)指針進(jìn)入放置區(qū)時(shí)發(fā)生，后者在拖動(dòng)文件的鼠標(biāo)指針位于放置區(qū)之上時(shí)發(fā)生。之所以用同一個(gè)函數(shù)處理兩個(gè)事件，原因就是不必對(duì)這兩個(gè)事件作出反應(yīng)，只要告訴瀏覽器自己什么也不做即可。
function ignoreDrag(e) { //因?yàn)槲覀冊(cè)谔幚硗戏?#xff0c;所以應(yīng)該確保沒有其他元素會(huì)取得這個(gè)事件e.stopPropagation();e.preventDefault(); }我們要響應(yīng)的事件是onDrop，這個(gè)事件一發(fā)生就說明要取得和處理文件了。
function drop(e) {//取消事件傳播及默認(rèn)行為e.stopPropagation();e.preventDefault();//取得拖進(jìn)來的文件var data = e.dataTransfer;var files = data.files;//將其傳給真正的處理文件的函數(shù)processFiles(files); }function processFiles(files) {var file = files[0];//創(chuàng)建FileReadervar reader = new FileReader();//告訴它準(zhǔn)備好數(shù)據(jù)URL之后做什么reader.onload = function(e) {dropBox.style.backgroundImage = "url('" + e.target.result + "')";};//讀取圖片：將圖片轉(zhuǎn)化為數(shù)據(jù)URLreader.readAsDataURL(file); }效果圖：
拖拽前：
拖拽后：
2.3 瀏覽器對(duì)File API的支持情況
更多內(nèi)容請(qǐng)參考此處
總結(jié)
以上是生活随笔為你收集整理的学习File API用于前端读取文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中的引用怎么理解_pytho
- 下一篇： 前端开发工程化探讨--基础篇（长文）