如何利用html5fileapi讀取本地文件-創(chuàng)新互聯(lián)

小編給大家分享一下如何利用html5 file api讀取本地文件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元肇源做網(wǎng)站,已為上家服務(wù),為肇源各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

在html4的年代，我們?nèi)绻诰W(wǎng)頁上呈現(xiàn)一張用戶本地的圖片，需要用戶先把圖片上傳到服務(wù)器，再根據(jù)服務(wù)器提供的圖片地址把圖片下載下來，才能把圖片在網(wǎng)頁上呈現(xiàn)出來。這一來二往，起碼已經(jīng)費(fèi)了兩倍于這張圖片的流量了，更別說服務(wù)器為了存儲(chǔ)這張圖片所花費(fèi)的資源以及用戶上傳錯(cuò)了圖片的冤枉成本（因?yàn)樵趆tml4時(shí)代，用戶選擇好圖片后，往往只能看到圖片的文件名，而無法通過預(yù)覽圖來進(jìn)一步確認(rèn)這張圖片是否就是自己想要上傳的）。

html5提供了新玩法，光靠瀏覽器，就可以對(duì)本地的（其實(shí)也可以是遠(yuǎn)程的）文件（主要是圖片）進(jìn)行呈現(xiàn)、讀取、處理等操作，而這一切，則是通過html5 file api來實(shí)現(xiàn)的。
首先是數(shù)據(jù)結(jié)構(gòu)，html5定義了一個(gè)file對(duì)象類型來表示文件，每個(gè)file對(duì)象對(duì)應(yīng)一個(gè)文件。file對(duì)象有3個(gè)屬性：name、size、type。name是不包含路徑的文件名，size是以字節(jié)為單位的文件體積大小，type則是文件的MIME（例如image/jpg）。

file對(duì)象不單獨(dú)存在，而是以數(shù)組形式，存在一個(gè)名為FileList的數(shù)組中。那么，如何拿到這個(gè)FileList數(shù)組呢？目前，html5有兩個(gè)途徑可以拿到FileList，一是通過file類型的input，二是通過拖放操作的drop事件。
通過file類型的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;
});

通過拖放操作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è)異步的過程，我們需要先為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屬性里。

最后，就是通過FileReader不同的方法，來決定讀取file對(duì)象數(shù)據(jù)后用什么數(shù)據(jù)格式來存放，并實(shí)施讀取：

readAsArrayBuffer(file) ：讀取file對(duì)象并存放為ArrayBuffer對(duì)象（ArrayBuffer對(duì)象是什么我暫時(shí)沒有搞清，應(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í)釋放，在本地瀏覽器使用起來時(shí)，與普通的url無異。

以把一張本地圖片顯示在頁面上為例：

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里來說，性能有了很大的提升。

比較這兩種讀取File對(duì)象的方案，F(xiàn)ileReader適合用來上傳文件，而ObjectURL則適合直接在瀏覽器進(jìn)行操作，然后操作后再把處理后的數(shù)據(jù)進(jìn)行上傳，例如利用canvas截圖或進(jìn)行圖片壓縮等。當(dāng)然，這一切都是要考慮兼容性的。

以上是“如何利用html5 file api讀取本地文件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：如何利用html5fileapi讀取本地文件-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article36/cdsjsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容