我一直在尝试创建一个非 Flash 上传面板，它也显示一个进度条。 在我们的服务器上，我们有 PHP 5.3(目前无法升级到 5.4，因此无法使用新的上传进度功能 => http://php.net/manual/en/session.upload-progress.php)。 我们不能使用基于 flash 的解决方案、扩展或类似的。

因此，我尝试将 XMLHttpRequest 与 AJAX 结合使用。 这里的问题是我只取得了部分成功。

我已经设法上传并在服务器上保存了一个大约 380 MB 的文件，但是，当尝试使用更大的文件(如 4 GB)时，它不会保存在服务器上(如果我在一次检查 Firebug点它会说“POST aborted”)。

另一件奇怪的事情是，对于同一个文件，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')
);

?>

最佳答案

其他人已经指出，在任何正确配置的生产 PHP 服务器上，您都会遇到一些限制。内存、帖子和文件最大值开始。此外，httpd 服务通常也会限制这些。

对于如此大的上传，答案是将文件切成 block ，将每个 block 发送到不同的 put 或 post(取决于浏览器。)

已经有一个库可以上传 block 文件，所以我将以它为例。为支持分块上传，上传处理程序使用 Content-Range header ，该 header 由插件为每个分块传输。

UploadHandler 类中的 handle_file_upload 函数是一个很好的例子，说明如何使用 PHP 在服务器端处理分块文件上传。 -- https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php

function handle_file_upload($uploaded_file, $name, $size, $type, $error,
        $index = null, $content_range = null)

该函数采用参数 $content_range = null，它在 HTTP header 中传递给服务器，并从 $_SERVER['HTTP_CONTENT_RANGE']; 中检索。 p>

稍后我们需要确定是否将文件上传附加到一个已经存在的文件中，因此我们设置了一个变量。如果 HTTP 请求报告的文件大小大于服务器上的实际文件大小，则 $content_range 变量不为 NULL 且文件存在，我们需要将此上传附加到现有文件。

$append_file = $content_range && is_file($file_path) &&
            $file->size > $this->get_file_size($file_path);

太棒了!现在怎么办？

所以现在我们需要知道我们是如何接收数据的。旧版本的 Firefox 无法使用 multipart/formdata (POST) 进行分块文件上传。客户端和服务器端都需要以不同方式处理这些请求。

        if ($uploaded_file && is_uploaded_file($uploaded_file)) {
            // multipart/formdata uploads (POST method uploads)
            if ($append_file) {
            // append to the existing file
                file_put_contents(
                    $file_path,
                    fopen($uploaded_file, 'r'),
                    FILE_APPEND
                );
            } else {
            // this is a new chunked upload OR a completed single part upload,
            // so move the file from the temp directory to the uploads directory.
                move_uploaded_file($uploaded_file, $file_path);
            }
        }

根据文档:只有支持 XHR 文件上传和 Blob API 的浏览器才支持分块文件上传，其中包括 Google Chrome 和 Mozilla Firefox 4+ -- https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads

要在 Mozilla Firefox 4-6(Firefox 7 之前支持 XHR 上传的 Firefox 版本)中分块上传，multipart 选项也必须设置为 false。以下是在服务器端处理这些情况的代码。

        else {
            // Non-multipart uploads (PUT method support)
            file_put_contents(
                $file_path,
                fopen('php://input', 'r'),
                $append_file ? FILE_APPEND : 0
            );
        }

最后我们可以验证下载是否完成，或者丢弃已取消的上传。

        $file_size = $this->get_file_size($file_path, $append_file);
        if ($file_size === $file->size) {
            $file->url = $this->get_download_url($file->name);
            if ($this->is_valid_image_file($file_path)) {
                $this->handle_image_file($file_path, $file);
            }
        } else {
            $file->size = $file_size;
            if (!$content_range && $this->options['discard_aborted_uploads']) {
                unlink($file_path);
                $file->error = $this->get_error_message('abort');
            }
        }

在客户端，您需要跟踪 block 。每篇文章发布后，我们发送下一部分，直到没有更多的 block 为止。示例库是 jQuery 的一个插件，这使得它变得 super 简单。像你一样使用裸 XHR 对象将需要更多代码。它可能看起来像这样:

var chunksize = 1000000 // 1MB
var chunks = math.ceil(chunksize / fileToUpload.fileSize);

function uploadChunk(fileToUpload, chunk = 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);

     var start = chunksize*chunk;
     var end = start+(chunksize-1)
     if (end >= fileToUpload.fileSize) {
            end = fileToUpload.fileSize-1;
     }

     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-Range", start+"-"+end+"/"+fileToUpload.fileSize);
     xhr.send(fileToUpload);
}

for(c = 0; c < chunks; c++) {
     uploadChunk(fileToUpload, c);
}

循环遍历 block ，依次上传每个 block 范围。请注意，Content-Range header 值的格式为 start-end/size。范围从 0 开始，因此“end” 只能是小于“size” 1 的最大值。您可以使用范围 "start-" 来指示该范围从 "start" 延伸到文件末尾。

编辑:

只是认为这可以在服务器上实现进度条，否则无法上传单个文件。由于您知道每个 block 的大小以及每个请求的状态，因此您可以在每次运行循环时相应地更新状态栏。

还需要注意的是某些浏览器的限制。 Chrome 和 Firefox 应该能够处理 4GB 的文件，但低于 9 的 IE 版本有一个错误，无法处理大于 2GB 的文件。

关于php - 基于 AJAX/PHP 的大文件上传进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10252309/