JavaScript 文件上傳與下載

来源:https://www.cnblogs.com/yuzhihui/archive/2023/01/29/17072894.html
-Advertisement-
Play Games

一、文件上傳 1、普通文件上傳 JavaScript 可以使用表單提交來實現文件上傳。首先,在 HTML 中創建一個文件輸入框: <input type="file" id="fileInput"> 然後,在 JavaScript 中獲取文件輸入框的引用,併在其上設置事件監聽器,如下所示: var ...


一、文件上傳

1、普通文件上傳

JavaScript 可以使用表單提交來實現文件上傳。首先,在 HTML 中創建一個文件輸入框:

<input type="file" id="fileInput">

然後,在 JavaScript 中獲取文件輸入框的引用,併在其上設置事件監聽器,如下所示:

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
  // 在這裡處理選擇的文件
});

在事件監聽器中,可以使用 fileInput.files[0] 屬性獲取選擇的文件,然後對文件進行處理。

接下來可以使用 XMLHttpRequestfetch API 來上傳文件。

使用 XMLHttpRequest

var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('upload success');
  }
};
xhr.send(formData);

使用 fetch

var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

fetch('url', {
  method: 'POST',
  body: formData
}).then(response => {
  if (response.ok) {
    console.log('upload success');
  }
});

另外還可以使用第三方庫如 axios 來實現文件上傳,具體實現方法可以參考相關文檔。

2、大文件上傳

在上傳大文件時,通常採用分塊上傳的方式。將大文件分成若幹個塊,每塊一個 HTTP 請求上傳。

實現大文件上傳的步驟如下:

  1. 用戶選擇文件。
  2. 將文件分成若幹塊。
  3. 對於每一塊,向伺服器發送 HTTP 請求上傳。
  4. 伺服器接收到文件塊後,將其存儲在伺服器上。
  5. 在所有塊上傳完成後,伺服器將所有塊合併成一個完整的文件。

JavaScript 可以使用 File API(File 和 Blob 對象)來實現文件的讀取和上傳。

下麵是一個使用 JavaScript 實現大文件上傳的簡單實例,使用分塊上傳的方法。

<input type="file" id="file-input">

 

// 上傳文件塊
function uploadChunk(file, start, end, chunk) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');
    xhr.setRequestHeader('Content-Range', 'bytes ' + start + '-' + end + '/' + file.size);
    xhr.send(chunk);
}

// 上傳文件
function uploadFile(file) {
    var chunkSize = 1 * 1024 * 1024; // 分塊大小為1MB
    var chunks = Math.ceil(file.size / chunkSize); // 計算分塊數
    var currentChunk = 0; // 當前分塊
    var start, end;
    while (currentChunk < chunks) {
        start = currentChunk * chunkSize;
        end = start + chunkSize >= file.size ? file.size : start + chunkSize;
        var chunk = file.slice(start, end);
        uploadChunk(file, start, end, chunk);
        currentChunk++;
    }
}

// 監聽文件選擇事件
document.getElementById('file-input').addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (file) {
        uploadFile(file);
    }
});

在這個實例中,我們使用了 XMLHttpRequest 對象上傳文件,並設置了 Content-Type 和 Content-Range 消息頭。Content-Type 消息頭表示上傳的數據類型是二進位數據,Content-Range 消息頭表示上傳的文件塊的範圍。

在這個示例中,我們將文件分成若幹塊,每塊大小為 1MB。我們使用 File API 中的 slice 方法截取文件塊,並使用 XMLHttpRequest 將文件塊上傳到伺服器。

註意,這隻是一個簡單的實例,代碼僅供參考,在實際應用中還需要考在考慮以下幾點:

  • 如果伺服器端支持斷點續傳,可以在伺服器端記錄已經上傳的文件塊,避免重覆上傳。
  • 需要考慮如何處理上傳失敗的文件塊,是否需要重試。
  • 在上傳過程中需要提供進度條,讓用戶瞭解上傳進度。
  • 在上傳完成後需要有反饋,告知用戶上傳是否成功。
  • 伺服器端如何處理上傳的文件塊,將其合併成一個完整的文件。
  • 伺服器端存儲空間的問題。可以使用分散式文件系統(如 HDFS)或雲存儲(如 Amazon S3)來存儲上傳的文件。
  • 文件塊上傳順序、文件塊校驗、斷點續傳等問題。

通過分塊上傳的方式,我們可以將大文件分成若幹塊上傳,避免一次性上傳大文件造成的超時或者記憶體不足的問題,同時也方便實現斷點續傳和上傳進度的顯示。

 

除了上面提到的方法外,還可以使用第三方庫來實現大文件上傳。常見的第三方庫有:

  • resumable.js
  • plupload
  • fine-uploader
  • tus-js-client

這些庫都提供了文件分塊、斷點續傳、上傳進度等功能,可以讓你更快捷地實現大文件上傳。

不過要註意的是,使用第三方庫可能會增加代碼的複雜性和對第三方庫的依賴。在選擇使用第三方庫時需要權衡其優缺點,並確保它滿足你的需求。

 

關於文件上傳需要瞭解的知識點:

  • HTML5 文件上傳
  • 文件上傳技術
  • 文件上傳安全性
  • 分塊上傳
  • 斷點續傳
  • 雲存儲

二、文件下載

在 JavaScript 中實現文件下載,常見的方法如下:

1、使用 window.location 實現:通過更改當前頁面的 URL 為文件下載地址,從而實現下載。

window.location = 'file-download-url';

2、使用 a 標簽實現:通過創建一個 a 標簽並設置其 href 和 download 屬性,從而實現下載。

var link = document.createElement("a");
link.download = "filename";
link.href = "file-download-url";
link.click();

3、使用 fetch API 實現:通過使用 fetch API 獲取文件內容,並將其寫入 Blob 對象,最後利用 URL.createObjectURL 將其下載。

fetch('file-download-url')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename';
    link.click();
    URL.revokeObjectURL(url);
    document.body.removeChild(link);
  });

 

作者:yuzhihui
出處:http://www.cnblogs.com/yuzhihui/ 聲明:歡迎任何形式的轉載,但請務必註明出處!!!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 怎麼從菜鳥程式員變成架構師 一、正確理解架構師的工作 架構師一般是不會去探討業務的範疇,他是把整個項目的結構搭出來,並讓程式員去填肉(業務功能部分) ,一般架構師的好壞決定這個項目的工期與質量,現在市面上看見的架構師一般都是別人的框架直接拿來用的,所以就不存在技術提升的範疇。很少會自己搭建框架。如果 ...
  • 一 引入 考慮實現一種機械泵控制項。 機械泵是工業中通常用來製造真空的一類設備,我們在繪製界面UI時希望可以生動形象地來表述一個機械泵,下麵講述了一種簡單的實現。 二 MechanicalPumpControl 聲明一個MechanicalPumpControl的自定義控制項,它繼承自Control類。 ...
  • 前言 Keil C51 是 51 系列相容單片機 C 語言軟體開發系統,支持 8051 微控制器體繫結構的 Keil 開發工具,適合每個階段的開發人員,不管是專業的應用工程師,還是剛學習嵌入式軟體開發的學生。 本篇博主將詳細介紹嵌入式集成開發環境 Keil C51 的安裝與註冊方法,以及國產 STC ...
  • xz是什麼 高壓縮率的工具,它使用 LZMA2 壓縮演算法,生成的壓縮文件比傳統使用的 gzip、bzip2 生成的壓縮文件更小, 不過xz也有一個壞處就是壓縮時間比較長,比7z壓縮時間還長一些。不過壓縮主要用於歸檔,不介意的可以忽略。 擅長壓縮文本和日誌文件,針對這塊的壓縮率,是目前我發現效率最高的 ...
  • Docker的常用命令 幫助命令 docker version # docker版本 docker info # 顯示docker的系統信息,包括鏡像和容器的數量 docker [命令] --help # 查看某個具體的命令 鏡像命令 查看下載的所有鏡像 # docker images REPOSI ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
  • props props簡單使用 class Person extends React.Component { render() { return ( <ul> <li>姓名:{this.props.name}</li> <li>年齡:{this.props.age}</li> <li>性別:{thi ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 需求描述 目前大多數PC端應用都有配套的移動端APP,如微信,淘寶等,通過使用手機APP上的掃一掃功能去掃頁面二維碼圖片進行登錄,使得用戶登錄操作更方便,安全,快捷。 思路解析 PC 掃碼原理? 掃碼登錄功能涉及到網頁端、伺服器和手機端, ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...