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

2022-01-09 00:00:00 file upload progress php ajax

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

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.

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

Hence I've tried using an XMLHttpRequest combined with AJAX. The problem here is that I've only achieved partial success.

我已经设法在服务器上上传并保存了一个大约 380 MB 的文件，但是，当尝试使用 4 GB 等更大的文件时，它不会保存在服务器上(如果我与 Firebug 核对一下点它会说POST aborted").

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").

另一个奇怪的是，对于同一个文件，xhr.upload.loaded 以 xhr.upload.total 的相同维度开始，并从那里开始计数.

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?

客户端代码是:

<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 无法更改与 Web 服务器相关的限制.例如，它们是 IIS 中 30MB 的默认最大发布请求大小......还有一个您可能会遇到的最大超时.与大小无关，但您的发布请求需要多长时间......即文件提交需要多长时间.这两种设置都可以受 IIS 或 Apache 的约束.

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.

相关文章