使用 JavaScript 開啟本地文字檔案

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 使用 JavaScript FileReader() 開啟本地文字檔案
  2. 使用 JavaScript FileReader()jQuery 開啟本地文字檔案
  3. 使用 JavaScript PromiseFileReader 開啟本地文字檔案
使用 JavaScript 開啟本地文字檔案

我們的目標是指導你瞭解可用於使用 JavaScript 開啟本地文字檔案的各種技術和方法。它還演示了使用 FileReader()Promise 和不同的 jQuery 函式和事件從系統中讀取文字檔案。

使用 JavaScript FileReader() 開啟本地文字檔案

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Read Text File</title>
    </head>
    <body>
        <input id='selectedfile' type='text' name='selectedfile'>
        <input id='inputfile' type='file' name='inputfile' onChange='showSelectedFile()'>
        <br><br>
        <pre id="output"></pre>
    
    </body>
</html>

CSS 程式碼:

input[type=file]{
    width:90px;
    color:transparent;
}

JavaScript 程式碼:

function showSelectedFile(){
    selectedfile.value= document.getElementById("inputfile").value; 
}
document.getElementById('inputfile')
        .addEventListener('change', function() {
        var fr=new FileReader();
        fr.onload=function(){
            document.getElementById('output')
                    .textContent=fr.result;
        }
        fr.readAsText(this.files[0]);
        })

輸出:

使用 javascript 開啟本地文字檔案 - 使用檔案閱讀器開啟本地文字檔案

此程式碼列印所選檔案(輸入檔案)的內容,與寫入輸入檔案的內容相同。

showSelectedFile() 方法顯示輸入檔案的路徑。然後,id 值為 inputfile 的元素被選中。

事件監聽器監聽 input 的變化。在這裡,它在選擇檔案時更改。

一旦它被更改,一個匿名函式就會執行,它使用 FileReader() 建構函式建立一個 FileReader 物件並將其命名為 fr。使用 fr,我們可以訪問 FileReader() 的不同函式和屬性。此函式讀取文字內容並將其顯示在瀏覽器中。

.onload 用於啟動特定功能。在我們的例子中,這個函式選擇第一個具有 id 作為 output 的元素並將其 .textContent 屬性設定為 .result 的值。

.textContent 讀取當前元素(節點)及其後代元素的內容。 .readAsText() 讀取給定輸入檔案的內容。一旦讀取了所有內容,result 屬性就會將此內容作為字串。

FileListinput 元素的 files 屬性返回。在這個例子中,假設 this 是一個 input 元素,它返回索引為零的檔案物件 (this.files[0])。

使用 JavaScript FileReader()jQuery 開啟本地文字檔案

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Read Text File</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>
    <body>
          <input type="file" name="inputfile" id="inputfile">
          <br><br>
        <pre id="output"></pre>
    </body>
</html>

JavaScript 程式碼:

$(document).ready(function(){
    $("#inputfile").change(function(){
        var file = this.files[0];
            var fr=new FileReader();
            fr.onload=function(data){
                $("#output").html(data.target.result);
            }
            fr.readAsText(file);
        });
});

輸出:

Hey,
Are you learning about how to open a local text file using JavaScript?

此示例程式碼還列印輸入檔案的內容,因為它寫入檔案(輸入檔案)中。

ready() 事件在文件物件模型 (DOM) 完全載入時觸發。為了容易理解,你可以說它使載入文件後可以訪問方法。

change() 事件用於瞭解元素的值是否已更改。我們只能對 inputtextareaselect 元素使用 change() 事件。它可以觸發 change() 事件或在 change() 事件上執行函式。

如果要返回或設定所選元素的 innerHTML(內容),.html() 非常有用。

現在,你可能會想 innerHTML 是如何改變的?這是由於針對 FileReaderresult 屬性。

看看下面的截圖(橙色輪廓)。

使用 javascript 開啟本地文字檔案 - 使用 jquery 的本地文字檔案資料

.onload.result.readAsText() 已在上一節中解釋過。你可以去那裡看看或檢查這個連結詳細閱讀。

你可以使用 File-System 讀取本地文字檔案(如果你在 Node Environment 上編碼)。

使用 JavaScript PromiseFileReader 開啟本地文字檔案

HTML 程式碼:

<!DOCTYPE html>
<html>
    <head>
        <title>Read Text File</title>
    </head>
    <body>
          <input type="file" onchange="readInputFile(this)"/>
        <h3>File Content:</h3>
        <pre id="output"></pre>
        
    </body>
    
</html>

JavaScript 程式碼:

function readFile(file) {
  return new Promise((resolve, reject) => {
    let freader = new FileReader();
    freader.onload = x=> resolve(freader.result);
    freader.readAsText(file);
})}

async function readInputFile(input) {
  output.innerText = await readFile(input.files[0]);
}

輸出:

Hey,
Are you learning about how to open a local text file using JavaScript?

在這個示例程式碼中,一旦選擇了輸入檔案,函式 readInputFile() 就會執行。此函式將等待(使用 await 運算子)Promise 被履行並返回預期值(如果已解決)。

此外,id 為 output 的元素的內容 (innerHTML) 將替換為 Promise 返回的值。await 運算子用於等待 Promise,它是一個物件,表示非同步函式的通過或失敗及其各自的值。它具有三個狀態,分別稱為 resolverejectpending

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript File