HTTP PUT请求 - 进度条实现

时间:2013-03-02 10:54:18

标签: php javascript ajax file-upload put

我发现 HTTP PUT请求最适合上传非常大的文件(1GB或更多)。

解决方案效果很好,我可以将我选择的任何文件上传到服务器。但是,我无法监控上传进度。

我已经实现了 onprogress 回调,但只有在通过PUT上传文件后才会调用此回调。

我的JavaScript代码:

var req = createRequest();
req.open("PUT", "PHP/upload_file.php?folder=" + aUploadedFile.upload_folder + "&master_folder=" + settings.strServerSideMasterFolder + "&file_name=" + aUploadedFile.file_name);
req.setRequestHeader("Content-type", "text/plain");
req.onload = function (event)
{
    console.log("OnLoad Called: " + aUploadedFile.file_name);
}
req.onprogress = function (event)
{
    console.log("OnProgress Called: " + aUploadedFile.file_name);
}
req.send(aUploadedFile.file_object);
  • 当我希望通过PUT监控上传进度时,我有哪些选择?
  • 我应该建立另一个JavaScript AJAX调用,它会监控服务器上传文件的大小吗?
  • 还有其他可行的解决方案吗?

我使用:

  • HTML5
  • 的JavaScript
  • PHP
  • 的Apache

我不使用:

  • 的jQuery

提前谢谢。

1 个答案:

答案 0 :(得分:4)

您是否尝试过xhr.upload.onprogress而不是xhr.onprogress

如果这也不起作用,你可以建立另一个JavaScript AJAX调用,就像你说的那样。最近,我制作了一个上传系统,每行读取文件行,它需要显示一些关于上传的额外信息,而不仅仅是百分比,所以我做了类似的事情:

  • 主页面向负责处理文件的文件发出AJAX请求
  • 在该文件中,我必须关闭连接,因此AJAX请求可以完成,但PHP脚本仍然在运行,使用:
ob_start();
$file = tempnam('/tmp', uniqid()); // create a temp file to show status of the action
echo json_encode(array('file' => $file));
header('Content-length: '.ob_get_length());
header('Connection: close');
ob_end_flush();
flush(); // The AJAX request is completed here, but the script is still running...

function writeToFile($handle, $arr) {
    ftruncate($handle, 0); // empty file
    fwrite($handle, json_encode($arr));
}
$handle = fopen($file, 'w');
while (readLine($uploadedFile)) {
    // code to process line
    writeToFile($handle, array('progress' => $current / $total, 'action' => 'Reading...'));
}
// insert into database
writeToFile($handle, array('progress' => '100', 'action' => 'Inserting into database...'));
fclose($handle);
  • 在主页面上,AJAX请求将返回包含该信息的文件的名称,因此我将使用setInterval方法
  • 为该文件创建多个GET请求

注意:在我的情况下,我创建了另一个PHP文件来显示进度文件的内容(带file_get_contents),所以我可以手动删除该文件操作完成