## javascript ~~~ // 分片上傳函數 ~~~ ~~~ async function uploadFile(file) { if (!file || typeof file !== 'object') { console.error('Invalid file object'); return; } const chunkSize = 1024 * 1024 * 2; // 分片大小，這里設置為2MB const totalChunks = Math.ceil(file.size / chunkSize); // 總分片數 let currentChunk = 0; // 當前分片序號 // 將文件分片 const chunks = []; for (let i = 0; i < totalChunks; i++) { const start = i * chunkSize; const end = Math.min(start + chunkSize, file.size); const chunk = file.slice(start, end); chunks.push(chunk); } // 上傳分片 for (const chunk of chunks) { let formData = new FormData(); formData.append('file', chunk); formData.append('chunkIndex', currentChunk); formData.append('totalChunks', totalChunks); formData.append('file_name', file_count +'_'+file.name); try { const response = await axios.post('./upload.php', formData, { headers: { 'Content-Type': 'multipart/form-data' }, }); document.querySelector('.spinner-border').style.display = 'none' let progress = response.data.progress if (response.data.success) { if(response.data.status == 'error'){ alert(response.data.msg) return } set_progress(progress) if (response.data.status === 'end'){ is_upload = false set_progress(100) console.log(`分片上傳成功完畢`); setTimeout(()=>{ location.reload() },500) return } currentChunk++; console.log(`分片${currentChunk}上傳成功`); } else { break; //console.error(`分片${currentChunk}上傳失敗`); } } catch (error) { console.error(`分片${currentChunk}上傳出錯`, error); throw error; } } } ~~~ ~~~ //點擊開始上傳 const form = document.getElementById('file-upload-form'); const fileInput = document.getElementById('file-input'); form.addEventListener('submit', function(event) { if (is_upload) return event.preventDefault(); if (fileInput.files && fileInput.files[0]) { is_upload = true document.querySelector('.spinner-border').style.display = 'block' const file = fileInput.files[0]; uploadFile(file); } else { alert('請選擇文件！') } }); ~~~ ## html ~~~ <form id="file-upload-form" method="post" enctype="multipart/form-data"> <input accept="video/*" id="file-input" class="btn btn-light" type="file" name="file"><br> <br> <button type="submit" class="btn btn-primary">開始上傳</button> </form> ~~~ ## php ~~~ // 獲取請求中的分片信息 $chunkIndex = (int) trim($_POST['chunkIndex']); $totalChunks = (int) trim($_POST['totalChunks']); $file_name = $_POST['file_name']; $file = $_FILES['file']; //status:error 錯誤 //status:end 已上傳 if (!strstr($file_name,'.')){ echo json_encode(['success'=> 'ok','msg'=>'不允許的文件！','status'=> 'error','progress' => 0]); return; } $exit = explode('.', $file_name); $exit = end($exit); //白名單 $fillable_exit = ['mp4','fly','avi','wmv','mov']; if (!in_array(strtolower($exit), $fillable_exit)){ echo json_encode(['success'=> 'ok','msg'=>'不允許的文件！','status'=> 'error','progress' => 0]); return; } // 計算分片文件的臨時存儲路徑 $tempPath = 'temp/' . $file['name'] . '.txt'; $targetPath = 'uploads/'. $file_name; if (file_exists(__DIR__ .'/'. $targetPath) && $chunkIndex == 0){ echo json_encode(['success'=> 'ok','msg'=>'此文件已上傳','status'=> 'error','progress' => 0]); return; } // 將當前分片移動到臨時存儲路徑 move_uploaded_file($file['tmp_name'], $tempPath); //計算進度條 $persent = number_format($chunkIndex / $totalChunks * 100,1); // 檢查是否所有分片都已上傳 if ($chunkIndex == $totalChunks - 1) { // 將所有分片合并為一個完整的文件 $outputPath = $targetPath; for ($i = 0; $i < $totalChunks; $i++) { try { $outputFile = fopen($outputPath, 'ab'); $inputFile = fopen($tempPath, 'rb'); while (!feof($inputFile)) { fwrite($outputFile, fread($inputFile, filesize($tempPath))); } fclose($inputFile); fclose($outputFile); unlink($tempPath); // 刪除臨時文件 echo json_encode(['success'=>1,'msg'=>'ok','status'=>'end','progress' => $persent]);exit; }catch (Exception $e){} } } else { // 如果還有其他分片未上傳，將當前分片追加到目標文件中 $outputFile = fopen($targetPath, 'ab'); $inputFile = fopen($tempPath, 'rb'); while (!feof($inputFile)) { fwrite($outputFile, fread($inputFile, filesize($tempPath))); } fclose($inputFile); fclose($outputFile); echo json_encode(['success'=>1,'msg'=>'ok','status'=>'up','progress' => $persent]); } ~~~