5
使用HTML5分块，我可以用小块文件上传文件。但是，当它开始使用多个http POST请求时会出现问题，这会导致计算机变慢或可能崩溃。如果我有5个文件，它将只有5个http请求eventhough我使用html5分割块如何在1个http请求下上载多个文件
例如：如果我上传5个文件，每个文件将被拆分到1mb块，所以如果第一个文件是10MB，那么它将变成10块1mb块。问题是，每个块将在1个http请求下，因此只有第一个文件将是10个HTTP请求。 想象一下，如果我有1GB的文件，它会变成1000 HTTP请求，并放慢计算机。
这是示例代码：
//Prepare element progress after the page load completely
var uploaders = [];
var totalChunks = 0;
var progress;
var bars;
$(document).ready(function() {
//progress = document.querySelector('progress');
//bars = document.querySelector('#bars');
});
//function for after the button is clicked, slice the file
//and call upload function
function sendRequest() {
//clean the screen
//bars.innerHTML = '';
var file = document.getElementById('fileToUpload');
for(var i = 0; i < file.files.length; i++) {
var blob = file.files[i];
var originalFileName = blob.name;
var filePart = 0
const BYTES_PER_CHUNK = 10 * 1024 * 1024; // 10MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
totalChunks = Math.ceil(SIZE/BYTES_PER_CHUNK);
while(start < SIZE) {
if (blob.webkitSlice) {
//for Google Chrome
var chunk = blob.webkitSlice(start, end);
} else if (blob.mozSlice) {
//for Mozilla Firefox
var chunk = blob.mozSlice(start, end);
}
uploadFile(chunk, originalFileName, filePart, totalChunks, i);
filePart++;
start = end;
end = start + BYTES_PER_CHUNK;
}
}
}
function uploadFile(blobFile, fileName) {
var fd = new FormData();
fd.append("fileToUpload", blobFile);
var xm = $.ajax({
url: "upload.php"+"?"+"file1="+fileName,
type: "POST",
data: fd,
processData: false,
contentType: false,
});
}
function uploadFile(blobFile, fileName, filePart, totalChunks, divBarsSelector) {
if(filePart == 0) {
bars = document.querySelector('#bars' + divBarsSelector);
}
var progress = document.createElement('progress');
progress.min = 0;
progress.max = 100;
progress.value = 0;
bars.appendChild(progress);
var fd = new FormData();
fd.append("fileToUpload", blobFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);
xhr.onload = function(e) {
//make sure if finish progress bar at 100%
progress.value = 100;
//counter if everything is done using stack
uploaders.pop();
if (!uploaders.length) {
bars.appendChild(document.createElement('br'));
bars.appendChild(document.createTextNode('DONE :)'));
//mergeFile(fileName, totalChunks);
}
};
// Listen to the upload progress for each upload.
xhr.upload.onprogress = function(e) {;
if (e.lengthComputable) {
progress.value = (e.loaded/e.total) * 100;
}
};
uploaders.push(xhr);
xhr.send(fd);
}
和用于接收的服务器部分将是upload.php的
$target_path = "uploads/";
$tmp_name = $_FILES['fileToUpload']['tmp_name'];
$size = $_FILES['fileToUpload']['size'];
$name = $_FILES['fileToUpload']['name'];
$originalName = $_GET['file'];
print_r("*******************************************\n");
print_r($originalName);
print_r("\n");
print_r($_FILES);
print_r("\n");
print_r("*******************************************\n");
$target_file = $target_path . basename($name);
//Result File
$complete = $originalName;
$com = fopen("uploads/".$complete, "ab");
error_log($target_path);
if ($com) {
// Read binary input stream and append it to temp file
$in = fopen($tmp_name, "rb");
if ($in) {
while ($buff = fread($in, 1048576)) {
fwrite($com, $buff);
}
}
fclose($in);
fclose($com);
}
如果你不希望你的文件分割成多个部分，那么你为什么要摆在首位分裂他们做？ – Carsten
不，我需要他们分手。因为1. PHP有上传限制（我知道我可以改变这个限制，但这不是一个真正的解决方案）2.这种方式我可以一次上传多个文件，这会使文件更快。 – Harts
实际上分割文件也会帮我实现恢复文件（万一连接突然下来），用户不必从头再开始 – Harts