追求卓越一諾千金

藍藍設計-_happytogetherfx,2011年成立-|子丹电影全集,主創清華團隊|_-智彩电子走势图11,專注軟件和互聯網ui設計開發--读书郎p20教材下载。擅長企業信息化管理_刀杆节、監控__3号彩票APP、大數據軟件UIUE谘詢和設計開發服務-_1995返水05%彩票网。立足UI|||重庆伟岸,好好學習||_第九模型,天天進步|-|亿彩邀请码是多少!


編程小知識之 JavaScript 文件讀取

2019-6-3 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容-尊龙娱乐用现金下,每天自動發到您的郵箱中|永盛国际平台客服电话, 請點這裏

本文介紹了兩種在 JavaScript 讀取文件的方法

文件讀取在當今的編程語言中應該算是一項比較 trivial 的工作了,語言的標準庫一般都會幫助我們做好文件抽象與讀寫緩存,我們僅需要熟悉和運用相關的 API 即可.

但是 JavaScript 由於安全性的原因,一直以來都沒有提供相關的文件讀取接口,但有時我們確實需要讀取本地文件內容,下麵是兩種可能的讀取方法.

1. 使用 HTML5 中的 FileReader
HTML5 引入的 FileReader 可以幫助我們讀取本地文件,但是有一個限製,就是我們不能直接使用文件路徑的方式來訪問文件,而是首先需要用戶選擇文件(通過文件選擇或者拖動文件至網頁等方式)

代碼還是比較簡單的,首先你需要在 html 文件中添加文件選擇表單:

<input type="file" id="file-input" />
<div id="file-content" />
1
2
接著就可以在 JavaScript 中進行(用戶選擇的)文件讀取了:

function readSingleFile(e) {
    // file from "file-input"
    var file = e.target.files[0];
    if (!file) {
      return;
    }
  
    // create FileReader
    var reader = new FileReader();
  
    // load callback
    reader.onload = function(e) {
      var contents = e.target.result;
    
      // process file contents here
      // ...
    
    };
  
    // do read
    reader.readAsText(file);
}

// add file input change listener
var fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", readSingleFile, false);

2. 使用 XMLHttpRequest
XMLHttpRequest 一般用於實現 Ajax,通過他我們也可以實現本地文件的讀取(但是有同源等限製),示例代碼如下:

var contents = "";

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
        contents = xmlhttp.responseText;
        
        // process file contents here
        // ...
      
    }
};

// send read request
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();

更多資料
http://researchhubs.com/post/computing/javascript/open-a-local-file-with-javascript.html
https://www.html5rocks.com/en/tutorials/file/dndfiles/
https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400

標簽: javascript 編程小知識之 文件讀取 « 25個專業設計師分析了8家汽車廠商美生美时,總結了 7 個 HUD 設計細節|_132彩票经典版! | 什麼樣的人-|105彩票网站正规吗、流程和組織環境可以促進創新_|覃奀垚?如何培訓創新力_|北大教授?»


訂閱Rss