AJAX / PHP的基础与上传大文件的进度条 [英] AJAX/PHP based upload with progress bar for large files
问题描述
我一直在试图建立一个非Flash上传面板，也显示一个进度条。 在我们的服务器上我们有PHP 5.3（无法升级到5.4了，所以新的上传进度功能不能使用=>的 http://php.net/manual/en/session.upload-progress.php ）。 我们不能使用基于Flash的解决方案，扩展或类似。
因此，我使用的是XMLHtt prequest结合AJAX已经试过。 这里的问题是，我只取得了部分成功。
我已经成功上传并保存在服务器上的约380 MB的文件，但是，与像4 GB的大文件时试图，它不会被保存在服务器上（如果我请与萤火虫在一个点它会说：POST中止）。
另一个奇怪的是，使用相同的文件xhr.upload.loaded开始xhr.upload.total相同的尺寸，并开始从计数。
有谁知道如何解决这个问题，或者有一个替代的解决方案？
客户端code是：
＆LT;脚本类型=应用程序/ JavaScript的SRC =jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=应用程序/ JavaScript的＆GT;
功能uploadToServer（）
{
的FileField =的document.getElementById（UploadedFile的）;
变种fileToUpload = fileField.files [0];
VAR XHR =新XMLHtt prequest（）;
VAR uploadStatus = xhr.upload;
uploadStatus.addEventListener（进步，函数（EV）{
如果（ev.lengthComputable）{
$（＃uploadPercentage）的HTML（（ev.loaded / ev.total）* 100 +％）;
}
}， 假）;
uploadStatus.addEventListener（错误，函数（EV）{$（＃错误）HTML（EV）}，FALSE）;
uploadStatus.addEventListener（负荷，函数（EV）{$（＃错误）HTML（）。APPOSTO！}，FALSE）;
xhr.open（
POST，
serverUpload.php
真正
）;
xhr.setRequestHeader（缓存控制，无缓存）;
xhr.setRequestHeader（内容类型，多部分/表单数据）;
xhr.setRequestHeader（X文件名，fileToUpload.fileName）;
xhr.setRequestHeader（X-文件大小，fileToUpload.fileSize）;
xhr.setRequestHeader（X-文件类型，fileToUpload.type）;
//xhr.setRequestHeader("Content-Type，应用程序/八位字节流）;
xhr.send（fileToUpload）;
}
$（函数（）{
$（＃uploadButton）点击（uploadToServer）。
}）;
＆LT; / SCRIPT＆GT;
HTML部分：
＆LT;形式的行动=NAME =uploadForm方法=邮报是enctype =的multipart / form-data的＆GT;
＆LT;输入ID =UploadedFile的NAME =的FileField类型=文件多/＆GT;
＆LT;输入ID =uploadButton类型=按钮值=上传！＆GT;
＆LT; /形式GT;
＆LT; DIV ID =uploadPercentage＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =错误＆GT;＆LT; / DIV＆GT;
服务器端code：
＆LT; PHP
$ PATH =./;
$文件名= $ _ SERVER ['HTTP_X_FILE_NAME'];
$档案大小= $ _ SERVER ['CONTENT_LENGTH'];
$文件=log.txt的;
$ FO = FOPEN（$文件，W）;
FWRITE（$ FO，$ PATH PHP_EOL）;
FWRITE（$ FO，$文件名PHP_EOL。）;
FWRITE（$ FO，$文件大小PHP_EOL。）;
FWRITE（。$ FO，$ PATH $文件名PHP_EOL）;
file_put_contents（$路径。$文件名，
的file_get_contents（PHP：//输入）
）;
？＆GT;
有有不能被PHP改变Web服务器相关的限制。例如，他们是30MB在IIS的默认最大POST请求的大小......还有一个最大的超时，你可能会击中。无关，大小，但你的POST请求正在多久......即多久其采取的文件提交。这两种设置都可以通过IIS或Apache的制约。
I've been trying to create a non-flash upload panel which also shows a progress bar. On our server we have PHP 5.3 (cannot upgrade to 5.4 for now, so the new upload progress feature cannot be used => http://php.net/manual/en/session.upload-progress.php). We cannot use flash based solutions, extensions or similar.
Hence I've tried using an XMLHttpRequest combined with AJAX. The problem here is that I've only achieved partial success.
I've managed to upload and save on the server a file of about 380 MB, however, when trying with a larger file like 4 GB, it won't be saved on the server (if I check with Firebug at one point it would say "POST aborted").
Another strange thing is that with the same file the xhr.upload.loaded starts with the same dimension of xhr.upload.total and starts counting from there.
Does anyone know how to solve this problem or has an alternative solution?
The client code is:
<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 part:
<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>
Server side code:
<?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')
);
?>
There are limits associated with the web server that can't be changed by PHP. Example, their is a default max post request size of 30MB in IIS...there is also a max timeout which you may be hitting. Has nothing to do with size, but how long your post request is taking...ie, how long its taking for the file submit. Both settings can be constrained by IIS or Apache.
这篇关于AJAX / PHP的基础与上传大文件的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
