[英]PHP - HTML5 API upload corrupted
任何人都可以幫助我處理我的代碼嗎? 我想使用 HTML5 API 構建上傳功能。 如果我上傳的文件小於 1mb,則文件沒問題。 但是,如果文件超過 1mb,文件將被損壞。
HTML 文件:
<!DOCTYPE html>
<html>
<head>
<title>Upload</title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<form method="POST" action="upload.php" enctype='multipart/form-data'>
<input type="file" name="fileToUpload" id="file"><br />
<input type="submit" id="submit">
</form>
</body>
<script>
$(document).ready(function(){
$('#submit').on('click', function(e){
e.preventDefault();
sendRequest();
});
//window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var bytes_per_chunk = 1048576; // 1mb chunk sizes.
var global_upload_counter = 0;
function sendRequest(){
var blob = document.getElementById('file').files[0];
var total_size = blob.size;
var start = 0;
var end = bytes_per_chunk;
// var counter = 1;
while(start < total_size)
{
// console.log('start : ' + start + ', end :' + end + ' and counter : ', counter);
var chunk = blob.slice(start, end);
uploadFile(chunk, blob.name);
start = end;
end = start + bytes_per_chunk;
//counter++;
}
}
function uploadFile(chunk, filename){
var fd = new FormData();
fd.append('fileToUpload', chunk);
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', uploadComplete, false);
xhr.addEventListener('error', uploadFailed, false);
xhr.addEventListener('abort', uploadCanceled, false);
xhr.open('POST', 'upload.php?filename=' + filename);
xhr.send(fd);
}
function uploadComplete(evt) {
// This event is raised when the server send back a response
if (evt.target.responseText != ""){
alert(evt.target.responseText);
}
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
xhr.abort();
xhr = null;
}
});
</script>
</html>
PHP代碼(上傳.php):
<?php
$target_path = "upload/";
$tmp_name = $_FILES['fileToUpload']['tmp_name'];
$size = $_FILES['fileToUpload']['size'];
$name = $_FILES['fileToUpload']['name'];
$filename = $_GET['filename'];
//$target_file = $target_path.$name;
$complete = $target_path. $filename;
// append; open or create binary file for writing at end-of-file
$com = fopen($complete, "ab");
error_log($target_path);
// read as binary
$in = fopen($tmp_name, "rb");
if($in){
while ($buff = fread($in, $size)){
fwrite($com, $buff);
}
}
fclose($in);
首先,為什么要將文件分成塊? 您可以通過 AJAX 一次性上傳整個文件。 您遇到的錯誤可能是由於塊邏輯造成的。 嘗試刪除塊邏輯,它會工作得很好。 所以你的上傳功能看起來像這樣:
$(document).ready(function(){
$('#submit').on('click', function(e){
e.preventDefault();
sendRequest();
});
//window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var bytes_per_chunk = 1048576; // 1mb chunk sizes.
var global_upload_counter = 0;
function sendRequest(){
var blob = document.getElementById('file').files[0];
var total_size = blob.size;
uploadFile(blob,filename);
}
function uploadFile(chunk, filename){
var fd = new FormData();
fd.append('fileToUpload', chunk);
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', uploadComplete, false);
xhr.addEventListener('error', uploadFailed, false);
xhr.addEventListener('abort', uploadCanceled, false);
xhr.open('POST', 'upload.php?filename=' + filename);
xhr.send(fd);
}
function uploadComplete(evt) {
// This event is raised when the server send back a response
if (evt.target.responseText != ""){
alert(evt.target.responseText);
}
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
xhr.abort();
xhr = null;
}
});
發送完整文件而不是塊,它應該可以工作。 如果你擔心上傳進度,這里有幾個解決方案: jQuery Upload Progress and AJAX file upload , File upload progress bar with jQuery
查看 user470714 提供的關於使用 html5 分塊上傳文件的答案,我發現了問題。
ajax實際上並沒有按順序上傳塊。 所以我更新了我的 HTML 代碼如下,現在它工作正常:
<!DOCTYPE html>
<html>
<head>
<title>Upload</title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<form method="POST" action="upload.php" enctype='multipart/form-data'>
<input type="file" name="fileToUpload" id="file"><br />
<input type="submit" id="submit">
</form>
</body>
<script>
$(document).ready(function(){
$('#submit').on('click', function(e){
e.preventDefault();
sendRequest();
});
//window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var bytes_per_chunk = 1048576; // 1mb chunk sizes.
var global_upload_counter = 0;
function sendRequest(){
var blob = document.getElementById('file').files[0];
var total_size = blob.size;
window.upload_counter = 0;
window.upload_filearray = [];
var start = 0;
var end = bytes_per_chunk;
while(start < total_size)
{
var chunk = blob.slice(start, end);
window.upload_filearray[window.upload_counter] = chunk;
window.upload_counter++;
start = end;
end = start + bytes_per_chunk;
}
// initiate upload the first time
window.upload_counter = 0;
window.filename = blob.name;
uploadFile(window.upload_filearray[window.upload_counter]);
}
function uploadFile(chunk){
var fd = new FormData();
fd.append('fileToUpload', chunk);
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', uploadComplete, false);
xhr.addEventListener('error', uploadFailed, false);
xhr.addEventListener('abort', uploadCanceled, false);
xhr.open('POST', 'upload.php?filename=' + window.filename);
window.upload_counter++;
xhr.send(fd);
}
function uploadComplete(evt) {
// This event is raised when the server send back a response
if (evt.target.responseText != ""){
console.log(evt.target.responseText);
}
if(window.upload_filearray.length > window.upload_counter){
uploadFile(window.upload_filearray[window.upload_counter]);
}
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
xhr.abort();
xhr = null;
}
});
</script>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.