本文小編為大家詳細(xì)介紹“怎么利用html5 file api讀取本地文件”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么利用html5 file api讀取本地文件”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
目前創(chuàng)新互聯(lián)建站已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、霍爾果斯網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
通過(guò)file類(lèi)型的input獲取FileList
<input id="file-input" type="file" />
或html5新增的可進(jìn)行文件多選的multiple屬性:
<input id="file-input" type="file" multiple />
一般,我們都是給input:file綁上一個(gè)onchange事件,以便在用戶選定文件后,馬上進(jìn)行讀取文件等下一步操作:
//原生js var inputElement = document.getElementById("file-input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { var fileList = this.files; } //jquery版 $('#file-input').on('change', function() { var fileList = this.files; });
通過(guò)拖放操作drop事件
首先要設(shè)定一個(gè)可供拖放的區(qū)域:
<div id="dropbox" style="width: 200px;height: 200px;"></div>
另外,為了能觸發(fā)drop事件,我們必須阻止dragenter和dragover事件的默認(rèn)行為:
var dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); }
然后,我們就可以在drop事件的callback中,獲取到fileList:
function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); }
怎么讀取或利用file對(duì)象呢?
html5提供了兩個(gè)方案:FileReader和ObjectUrl。
使用FileReader讀取file對(duì)象
首先需要實(shí)例化FileReader對(duì)象:
var reader = new FileReader();
利用FileReader讀取file對(duì)象是一個(gè)異步的過(guò)程,我們需要先為FileReader設(shè)置好load事件的callback,告知FileReader在讀取到file對(duì)象的數(shù)據(jù)后應(yīng)該進(jìn)行什么進(jìn)一步的操作:
reader.onload = function(e) { document.getElementById("image").src = e.target.result; }
上面這段代碼的意思是,F(xiàn)ileReader讀取到圖片的數(shù)據(jù)后,把數(shù)據(jù)(DataUrl)放到的src屬性里。
最后,就是通過(guò)FileReader不同的方法,來(lái)決定讀取file對(duì)象數(shù)據(jù)后用什么數(shù)據(jù)格式來(lái)存放,并實(shí)施讀?。?/p>
readAsArrayBuffer(file) :讀取file對(duì)象并存放為ArrayBuffer對(duì)象(ArrayBuffer對(duì)象是什么我暫時(shí)沒(méi)有搞清,應(yīng)該是一種為了高效存取數(shù)據(jù)而產(chǎn)生的數(shù)據(jù)結(jié)構(gòu))。
readAsText(file [, 'UTF-8']) :以一般文本模式讀取file對(duì)象,值得注意的是,利用第二個(gè)參數(shù)(可選)可指定字符編碼。
readAsDataURL(file) :讀取file對(duì)象并存放為data: URL格式的字符串。
利用ObjectURL
ObjectURL相當(dāng)于文件的一個(gè)臨時(shí)路徑,此臨時(shí)路徑可隨時(shí)生成、隨時(shí)釋放,在本地瀏覽器使用起來(lái)時(shí),與普通的url無(wú)異。
以把一張本地圖片顯示在頁(yè)面上為例:
var img = document.createElement("img"); img.src = window.URL.createObjectURL(file);
此時(shí),src形如:blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40
用這個(gè)src就能讓瀏覽器從本地讀取圖片。
這種方案相對(duì)用FileReader生成圖片的base64編碼并放到的src里來(lái)說(shuō),性能有了很大的提升。
比較這兩種讀取File對(duì)象的方案,F(xiàn)ileReader適合用來(lái)上傳文件,而ObjectURL則適合直接在瀏覽器進(jìn)行操作,然后操作后再把處理后的數(shù)據(jù)進(jìn)行上傳,例如利用canvas截圖或進(jìn)行圖片壓縮等。當(dāng)然,這一切都是要考慮兼容性的。
讀到這里,這篇“怎么利用html5 file api讀取本地文件”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前標(biāo)題:怎么利用html5fileapi讀取本地文件
文章分享:http://bm7419.com/article4/igsioe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、網(wǎng)站制作、網(wǎng)站維護(hù)、網(wǎng)站策劃、網(wǎng)站營(yíng)銷(xiāo)、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)