JavaScript基礎之文件上傳與下載的實現(xiàn)詳解

更新時間：2023年01月30日 09:06:57 作者：yuzhihui

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)文件上傳與下載功能的相關資料，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以學習一下

一、文件上傳

1、普通文件上傳

JavaScript 可以使用表單提交來實現(xiàn)文件上傳。首先，在 HTML 中創(chuàng)建一個文件輸入框：

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

然后，在 JavaScript 中獲取文件輸入框的引用，并在其上設置事件監(jiān)聽器，如下所示：

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

在事件監(jiān)聽器中，可以使用 fileInput.files[0] 屬性獲取選擇的文件，然后對文件進行處理。

接下來可以使用 XMLHttpRequest 或 fetch 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 來實現(xiàn)文件上傳，具體實現(xiàn)方法可以參考相關文檔。

2、大文件上傳

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

實現(xiàn)大文件上傳的步驟如下：

用戶選擇文件。
將文件分成若干塊。
對于每一塊，向服務器發(fā)送 HTTP 請求上傳。
服務器接收到文件塊后，將其存儲在服務器上。
在所有塊上傳完成后，服務器將所有塊合并成一個完整的文件。

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

下面是一個使用 JavaScript 實現(xiàn)大文件上傳的簡單實例，使用分塊上傳的方法。

<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); // 計算分塊數(shù)
    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++;
    }
}

// 監(jiān)聽文件選擇事件
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 消息頭表示上傳的數(shù)據(jù)類型是二進制數(shù)據(jù)，Content-Range 消息頭表示上傳的文件塊的范圍。

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

注意，這只是一個簡單的實例，代碼僅供參考，在實際應用中還需要考在考慮以下幾點：

如果服務器端支持斷點續(xù)傳，可以在服務器端記錄已經(jīng)上傳的文件塊，避免重復上傳。
需要考慮如何處理上傳失敗的文件塊，是否需要重試。
在上傳過程中需要提供進度條，讓用戶了解上傳進度。
在上傳完成后需要有反饋，告知用戶上傳是否成功。
服務器端如何處理上傳的文件塊，將其合并成一個完整的文件。
服務器端存儲空間的問題?？梢允褂梅植际轿募到y(tǒng)（如 HDFS）或云存儲（如 Amazon S3）來存儲上傳的文件。
文件塊上傳順序、文件塊校驗、斷點續(xù)傳等問題。

通過分塊上傳的方式，我們可以將大文件分成若干塊上傳，避免一次性上傳大文件造成的超時或者內(nèi)存不足的問題，同時也方便實現(xiàn)斷點續(xù)傳和上傳進度的顯示。

除了上面提到的方法外，還可以使用第三方庫來實現(xiàn)大文件上傳。常見的第三方庫有：

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

這些庫都提供了文件分塊、斷點續(xù)傳、上傳進度等功能，可以讓你更快捷地實現(xiàn)大文件上傳。

不過要注意的是，使用第三方庫可能會增加代碼的復雜性和對第三方庫的依賴。在選擇使用第三方庫時需要權衡其優(yōu)缺點，并確保它滿足你的需求。

關于文件上傳需要了解的知識點：

HTML5 文件上傳
文件上傳技術
文件上傳安全性
分塊上傳
斷點續(xù)傳
云存儲

二、文件下載

在 JavaScript 中實現(xiàn)文件下載，常見的方法如下：

1、使用 window.location 實現(xiàn)：通過更改當前頁面的 URL 為文件下載地址，從而實現(xiàn)下載。

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

2、使用 a 標簽實現(xiàn)：通過創(chuàng)建一個 a 標簽并設置其 href 和 download 屬性，從而實現(xiàn)下載。

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

3、使用 fetch API 實現(xiàn)：通過使用 fetch API 獲取文件內(nèi)容，并將其寫入 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);
  });

到此這篇關于JavaScript基礎之文件上傳與下載的實現(xiàn)詳解的文章就介紹到這了,更多相關JavaScript文件上傳下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: