我一直在尝试创建一个非 Flash 上传面板,该面板还显示一个进度条。在我们的服务器上,我们有 PHP 5.3(目前无法升级到 5.4,因此无法使用新的上传进度功能 => http://php.net/manual/en/session.upload-progress.php)。我们不能使用基于闪存的解决方案、扩展或类似的。
因此,我尝试将 XMLHttpRequest 与 AJAX 结合使用。这里的问题是我只取得了部分成功。
我已经设法在服务器上上传并保存了一个大约 380 MB 的文件,但是,当尝试使用 4 GB 等更大的文件时,它不会保存在服务器上(如果我在某个时间点与 Firebug 进行检查,它会说“POST中止”)。
另一个奇怪的事情是,对于同一个文件,xhr.upload.loaded 以 xhr.upload.total 的相同维度开始,并从那里开始计数。
有谁知道如何解决这个问题或有替代解决方案?
客户端代码为:
<script type="application/javascript" src="jquery.js"></script>
<script type="application/javascript">
function uploadToServer()
{
fileField = document.getElementById("uploadedFile");
var fileToUpload = fileField.files[0];
var xhr = new XMLHttpRequest();
var uploadStatus = xhr.upload;
uploadStatus.addEventListener("progress", function (ev) {
if (ev.lengthComputable) {
$("#uploadPercentage").html((ev.loaded / ev.total) * 100 + "%");
}
}, false);
uploadStatus.addEventListener("error", function (ev) {$("#error").html(ev)}, false);
uploadStatus.addEventListener("load", function (ev) {$("#error").html("APPOSTO!")}, false);
xhr.open(
"POST",
"serverUpload.php",
true
);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", fileToUpload.fileName);
xhr.setRequestHeader("X-File-Size", fileToUpload.fileSize);
xhr.setRequestHeader("X-File-Type", fileToUpload.type);
//xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send(fileToUpload);
}
$(function(){
$("#uploadButton").click(uploadToServer);
});
</script>
HTML部分:
<form action="" name="uploadForm" method="post" enctype="multipart/form-data">
<input id="uploadedFile" name="fileField" type="file" multiple />
<input id="uploadButton" type="button" value="Upload!">
</form>
<div id="uploadPercentage"></div>
<div id="error"></div>
服务器端代码:
<?php
$path = "./";
$filename = $_SERVER['HTTP_X_FILE_NAME'];
$filesize = $_SERVER['CONTENT_LENGTH'];
$file = "log.txt";
$fo= fopen($file, "w");
fwrite($fo, $path . PHP_EOL);
fwrite($fo, $filename . PHP_EOL);
fwrite($fo, $filesize . PHP_EOL);
fwrite($fo, $path . $filename . PHP_EOL);
file_put_contents($path . $filename,
file_get_contents('php://input')
);
?>