进度条实现
HTTP PUT Request - Progress Bar Implementation
本文关键字:实现 更新时间:2023-09-26
我发现HTTP PUT请求列表最适合非常大的文件上传(1GB或更多)。
解决方案运行良好,我可以上传我选择的任何文件到服务器。但是,我很难监控上传进度。
我已经实现了onprogress回调,但是这个只在文件通过PUT上传后被调用一次。
My JavaScript Code:
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
提前感谢。
您试过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
),因此我可以在操作完成时手动删除该文件
相关文章:
- 如何使用动画实现纸张推车
- 客户端服务器REST API captcha实现
- 如何实现此布局
- Meteor忘记了密码的实现
- 使用Native Sockets在Android中实现WebSockets
- 在样板文件中实现Ajax
- instanceof是如何在JavaScript中实现的
- 如何正确实现Jquery多选小部件
- 实现一个建立在google.com之上的自定义搜索引擎
- 多个组件是如何实现的
- window.location使用jquery mobile实现chrome跳转
- 如何在OpenERP中实现网络摄像头
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- javascript加密实现,包括可信否认
- 实现比较方法的最佳实践是什么;s的比较类型是在运行时选择的
- 如何让程序员在javascript中实现正确的回调
- 如何使用自定义辅助对象(handler)实现嵌套的每个循环
- AngularJS智能表全局配置实现
- Expressjs/AngularJS:实现req-flash后出错
- 如何在JavaScript中实现二进制搜索