基于AJAX / PHP的上传，带有进度条，可处理大文件

Question

我一直在尝试创建一个非Flash上​​传面板，该面板还显示一个进度栏。在我们的服务器上，我们有PHP
5.3（暂时无法升级到5.4，因此无法使用新的上传进度功能=> http://php.net/manual/zh-CN/session.upload-
progress.php
）。我们不能使用基于Flash的解决方案，扩展程序或类似方法。

因此，我尝试将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')
);

?>

Answer 1

与Web服务器相关联的限制是PHP不能更改的。例如，它们是IIS中30
MB的默认最大邮寄请求大小…您可能还会遇到一个最大超时。与大小无关，但是您的发帖请求要花多长时间…即文件提交需要多长时间。IIS或Apache都可以限制这两个设置。