本文小編為大家詳細介紹“怎么利用html5 file api讀取本地文件”，內容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“怎么利用html5 file api讀取本地文件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

目前創(chuàng)新互聯(lián)建站已為千余家的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、綿陽服務器托管、企業(yè)網(wǎng)站設計、霍爾果斯網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

通過file類型的input獲取FileList

<input id="file-input" type="file" />

或html5新增的可進行文件多選的multiple屬性：

<input id="file-input" type="file" multiple />

一般，我們都是給input:file綁上一個onchange事件，以便在用戶選定文件后，馬上進行讀取文件等下一步操作：

//原生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事件

首先要設定一個可供拖放的區(qū)域：

<div id="dropbox" style="width: 200px;height: 200px;"></div>

另外，為了能觸發(fā)drop事件，我們必須阻止dragenter和dragover事件的默認行為：

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對象呢？

html5提供了兩個方案：FileReader和ObjectUrl。

使用FileReader讀取file對象

首先需要實例化FileReader對象：

var reader = new FileReader();

利用FileReader讀取file對象是一個異步的過程，我們需要先為FileReader設置好load事件的callback，告知FileReader在讀取到file對象的數(shù)據(jù)后應該進行什么進一步的操作：

reader.onload = function(e) { 
    document.getElementById("image").src = e.target.result; 
}

上面這段代碼的意思是，F(xiàn)ileReader讀取到圖片的數(shù)據(jù)后，把數(shù)據(jù)（DataUrl）放到的src屬性里。

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

1. readAsArrayBuffer(file) ：讀取file對象并存放為ArrayBuffer對象（ArrayBuffer對象是什么我暫時沒有搞清，應該是一種為了高效存取數(shù)據(jù)而產(chǎn)生的數(shù)據(jù)結構）。

2. readAsText(file [, 'UTF-8']) ：以一般文本模式讀取file對象，值得注意的是，利用第二個參數(shù)（可選）可指定字符編碼。

3. readAsDataURL(file) ：讀取file對象并存放為data: URL格式的字符串。

利用ObjectURL

ObjectURL相當于文件的一個臨時路徑，此臨時路徑可隨時生成、隨時釋放，在本地瀏覽器使用起來時，與普通的url無異。

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

var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);

此時，src形如：blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

用這個src就能讓瀏覽器從本地讀取圖片。

這種方案相對用FileReader生成圖片的base64編碼并放到的src里來說，性能有了很大的提升。

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

讀到這里，這篇“怎么利用html5 file api讀取本地文件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前標題：怎么利用html5fileapi讀取本地文件
文章分享：http://aaarwkj.com/article4/igsioe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站制作、網(wǎng)站維護、網(wǎng)站策劃、網(wǎng)站營銷、商城網(wǎng)站

廣告

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