AJAX大文件分批上傳是一種通過前端技術實現分批上傳大文件的方法。在傳統的文件上傳方式中,如果文件過大,會導致上傳時間過長、服務器負載過重等問題。而通過使用AJAX技術,可以將大文件分成多個小塊,逐個上傳,從而提高上傳效率并減輕服務器壓力。
假設我們有一個名為"file"的input標簽,用戶選擇了一個體積較大的文件上傳。我們首先需要通過JS代碼獲取到這個文件,并將其分割成多個小塊。可以使用File API提供的slice方法將文件分割成塊。例如:
let fileInput = document.querySelector('input[type="file"]'); let file = fileInput.files[0]; let chunkSize = 1024 * 1024; // 每塊大小為1MB let totalChunks = Math.ceil(file.size / chunkSize); let chunks = []; for (let i = 0; i< totalChunks; i++) { let start = i * chunkSize; let end = Math.min(start + chunkSize, file.size); let chunk = file.slice(start, end); chunks.push(chunk); }
上述代碼中,我們定義了每塊的大小為1MB。然后根據文件大小計算出總塊數。接下來使用一個數組存儲所有分割后的文件塊。在循環中,我們使用slice方法根據塊的起始位置和結束位置獲取對應的文件塊,并將其添加到數組中。
接下來,我們可以使用AJAX技術逐個上傳這些文件塊。在上傳時,我們需要指定上傳的URL、請求方法以及其他必要的參數。例如:
let uploadUrl = '/uploadFile'; let method = 'POST'; function uploadChunk(chunk, chunkNumber) { return new Promise((resolve, reject) =>{ let formData = new FormData(); formData.append('file', chunk, file.name); formData.append('chunkNumber', chunkNumber); formData.append('totalChunks', totalChunks); let xhr = new XMLHttpRequest(); xhr.open(method, uploadUrl, true); xhr.onload = () =>{ if (xhr.status === 200) { resolve(); } else { reject(xhr.statusText); } }; xhr.onerror = () =>reject(xhr.statusText); xhr.send(formData); }); } // 逐個上傳文件塊 chunks.reduce((prev, chunk, index) =>{ return prev.then(() =>uploadChunk(chunk, index)); }, Promise.resolve()) .then(() =>{ console.log('文件上傳成功!'); }) .catch(error =>{ console.error('文件上傳失敗:', error); });
在上述代碼中,我們定義了一個uploadChunk函數,用于上傳單個文件塊。該函數返回一個Promise對象,在上傳成功時解析,上傳失敗時拒絕,并帶有相應的錯誤信息。
接下來,我們使用reduce方法逐個上傳文件塊。使用Promise.resolve()作為初始Promise對象,并將其傳遞給reduce方法。在reduce方法中,每次循環都會調用uploadChunk函數,并將之前的Promise對象作為參數傳遞進去。這樣可以確保下一個文件塊在上一個文件塊上傳成功后再開始上傳。
最后,我們可以在Promise鏈中的.then方法中打印出文件上傳成功的消息,或在.catch方法中處理上傳失敗的情況。
通過以上代碼,我們可以實現將大文件分批上傳的功能,并提高上傳效率。同時,服務器也能夠更好地處理這種分批上傳的方式,減少了因大文件傳輸而導致的負載壓力。