不涉及前后端交互，由前端數據生成文件并下載和上傳文件前端解析的過程。

目錄

一、由前端數據生成文件并下載

1. 函數編寫

2. 使用方法

二、上傳文件并解析

?????????1. 函數編寫

2. 使用方法

總結

---

一、由前端數據生成文件并下載

1. 函數編寫

由JS代碼生成一個<a>標簽元素。設置元素的href和download屬性，為函數傳入參數的文件內容和文件名，并設置元素為不可見，以消除對前端界面的視覺影響。

將元素加入body，并模擬其點擊事件，即下載一個內容為fileContent、名字為fileName的文件。并在點擊事件后移除元素。

// 下載文件，文件名為fileName，文件內容為fileContent function downloadFile(fileName, fileContent) {let element = document.createElement('a');element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContent));element.setAttribute('download', fileName);element.style.display = 'none';document.body.appendChild(element);element.click();document.body.removeChild(element); }

2. 使用方法

可以在JS代碼的任意執行時刻，動態傳入參數實現文件的下載。如實現點擊按鈕下載文件的功能，則可以在按鈕的點擊事件中調用函數。

$('#button').onclick = function() {downloadFile('Hello.txt', 'Hello World!');}

二、上傳文件并解析

1. 函數編寫

由JS代碼生成一個<input>標簽元素。設置元素的type屬性為file，以，并設置元素為不可見。將元素加入body，并模擬其點擊事件。其會喚醒一個文件上傳對話框，用戶可以手動選擇需要上傳解析的文件。

設置元素的onchange屬性，在元素內容改變時，執行以下代碼：

• 若元素內容為空，則直接返回；
• 若元素內容非空，且有上傳文件，則創建一個FileReader，對文件內容進行讀取。讀取出的內容以字符串形式，由函數的傳入參數也即對文件內容進行操作的回調函數進行處理。

// 上傳文件，彈出上傳對話框，文件內容由uploadCallBackFunction回調函數處理 function uploadFile(uploadCallBackFunction) {let element = document.createElement('input');element.setAttribute('type', 'file');element.style.display = 'none';element.onchange = function (){if (this.value==='')return;if (this.files[0]){let reader = new FileReader();reader.readAsText(this.files[0], "UTF-8");reader.onload = function(evt){let file_string = evt.target.result;uploadCallBackFunction(file_string);}}}document.body.appendChild(element);element.click();document.body.removeChild(element); }

2. 使用方法

由于上傳文件并讀文件解析的操作是異步性的（寫在onchange函數中），函數無法通過返回值返回需要的文件內容。因此通過參數傳入回調函數的方式，在讀取文件內容后調用，對讀取到的內容進行處理。

$('#button').onclick = function () {uploadFile(console.log);}

---

總結

使用純前端的方式實現了文件的上傳與下載。實際場景中，可以應用于一鍵導入導出前端頁面保存的配置等；在支持不同文件格式時，可以使用前端解析的方式使數據格式統一，降低前后端交互過程的耦合性。

總結

以上是生活随笔為你收集整理的JavaScript纯前端上传和下载文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。