可以使用xhrFields将onprogress功能添加到jQuery.ajax()吗？
可以使用xhrFields将onprogress功能添加到jQuery.ajax()吗？
提问于 2013-03-28 04:03:25
正如这里所建议的：https://gist.github.com/HenrikJoreteg/2502497，我正在尝试在我的jQuery.ajax()文件上传中添加onprogress功能。上传工作正常，onprogress事件正在触发，但并不像我预期的那样--它不是在某个时间间隔重复触发，而是只在上传完成时触发一次。有没有办法指定onprogress刷新的频率？或者，我正在尝试做一些做不到的事情？下面是我的代码：
$.ajax(
{
async: true,
contentType: file.type,
data: file,
dataType: 'xml',
processData: false,
success: function(xml)
{
// Do stuff with the returned xml
},
type: 'post',
url: '/fileuploader/' + file.name,
xhrFields:
{
onprogress: function(progress)
{
var percentage = Math.floor((progress.total / progress.totalSize) * 100);
console.log('progress', percentage);
if (percentage === 100)
{
console.log('DONE!');
}
}
}
});好吧，已经有几年了。我重新考虑了这一点，并使用GetFree的答案，将我的代码更新为以下内容：
$('#file_input').change(function()
{
var file = this.files[0];
$('#upload_button').click(funtion(e)
{
req = new XMLHttpRequest();
req.upload.addEventListener('progress', updateProgress, false);
req.addEventListener('load', transferComplete, false);
var url = 'https://my.url';
req.open('POST', url, true);
req.setRequestHeader('Content-Type', myFileType);
req.setRequestHeader('Content-Length', myFileLength);
req.send(file);
});
);
function updateProgress(e)
{
var percent = Math.floor(e.loaded / e.total * 100);
console.log("percent = " + percent);
}
function transferComplete(e)
{
console.log("transfer complete");
}我已经将GetFree的帖子标记为可接受的答案。很抱歉让您久等了。
Stack Overflow用户
发布于 2018-09-10 22:43:32
这是Stack Overflow上其他地方的另一个答案，但我认为这回答了你的问题。我已经修改了它，以满足我自己的需要，将“流式”数据从服务器发送到可滚动的div (然后我可以强制始终滚动到底部，从而显示随时间推移的进度，从而不等待整个记录集的完成)。
下面的客户端代码将结果内容添加到id为"scrollable_area“的预定义div中(然后可以滚动)……
<div style="position:absolute; left:5px; right:5px; top:5px; height:35px;">
<label for="auto_scroll">Auto Scroll</label> <input type="checkbox" id="auto_scroll" checked>
</div>
<div id="scrollable_area" style="position:absolute; overflow:auto; left:5px; right:5px; top:45px; bottom:5px;"></div>
<script type="text/javascript">
var last_response_len = false;
var auto_scroll = null;
var scrollable_area = null;
$().ready(function() {
auto_scroll = document.getElementById("auto_scroll");
scrollable_area = document.getElementById("scrollable_area");
$.ajax("your_api_call.php", {
xhrFields: {
onprogress: function(e) {
var this_response, response = e.currentTarget.response;
if(last_response_len === false) {
this_response = response;
last_response_len = response.length;
} else {
this_response = response.substring(last_response_len);
last_response_len = response.length;
}
scrollable_area.innerHTML += this_response;
if(auto_scroll.checked) {
scrollable_area.scrollTop = scrollable_area.clientHeight + scrollable_area.scrollHeight + 500;
}
}
}
})
.done(function(data) {
console.log("Completed response");
})
.fail(function(data) {
console.log("Error: ", data);
});
console.log("your_api_call.php Request Sent!");
});
</script>然后，服务器端的 "your_api_call.php“文件调用需要刷新其输出(每个数据行，以便查看随时间推移的进度)，然后这些输出可以立即显示在上面的"scrollable_area”目录中。
// Do Db loop
while ($record = $recordset->fetch(PDO::FETCH_ASSOC)) {
set_time_limit(10); // Don't timeout on large data sets seeing as this is a big task that we are wanting to watch progress!
echo 'Do what you gotta do... ' . $record["register_id"] . '<br>';
flush(); // Push to the client / ajax
ob_flush(); // As above
}简短的回答是...是。希望这能有所帮助:-)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15668339
复制相关文章
相似问题
腾讯云开发者
