博客 / 詳情

返回

前端利用XMLHttpRequest讀取本地文本文件

問題

前端常見是通過input按鈕上傳讀取文件信息,此時知道本地文件路徑需要直接js讀取本地文件內的信息

注意

本地測試,需要解決本地瀏覽器跨域問題,如:
瀏覽器跨域問題

可查看此鏈接解決:
解決本地瀏覽器運行項目是的跨域問題

解決

利用XMLHttpRequest獲取到文件的信息。

/**
 * XMLHttpRequest.open() 初始化請求參數
 * XMLHttpRequest.send() 發送網絡請求
 * XMLHttpRequest.onload() 監聽請求結果
 * XMLHttpRequest.responseType 對響應結果進行聲明,來對結果自動進行處理(text,json,blob,document)
 * XMLHttpRequest.onerror() 請求中斷等錯誤發生時的處理
 * XMLHttpRequest.status 為HTTP狀態碼 如 404/422/403等,當為200時為正確響應
 * XMLHttpRequest.statusText HTTP狀態碼內容,200時為ok,404 為Not Found
 * XMLHttpRequest.response 服務器端響應的內容
 */
function readTextFile(filePath, callback) {
    const xhrFile = new XMLHttpRequest();
    xhrFile.open("GET", filePath, true);
    xhrFile.onload  = function() {
        const allText = xhrFile.response;
        callback(allText)
    }
    xhrFile.send();
}
const filePath = `E:/學習/JavaScript/txt.txt`
readTextFile(filePath, (textDetail) => {
    console.log(textDetail)
})

前端利用XMLHttpRequest讀取本地文本文件

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.