問題
前端常見是通過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讀取本地文本文件