Question

正如此处所建议的那样：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!');
            }
        }
    }
});

Answer 1

简答：
不，你不能用xhrFields做你想做的事。

答案很长：

XmlHttpRequest对象中有两个进度事件：

响应进度（XmlHttpRequest.onprogress）
这是浏览器从服务器下载数据时。
请求进度（XmlHttpRequest.upload.onprogress）
这是浏览器将数据发送到服务器时（包括POST参数，cookie和文件）

在您的代码中，您正在使用响应进度事件，但您需要的是请求进度事件。你就是这样做的：

$.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,
    xhr: function(){
        // get the native XmlHttpRequest object
        var xhr = $.ajaxSettings.xhr() ;
        // set the onprogress event handler
        xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ;
        // set the onload event handler
        xhr.upload.onload = function(){ console.log('DONE!') } ;
        // return the customized object
        return xhr ;
    }
});

xhr选项参数必须是一个函数，它返回一个本机XmlHttpRequest对象供jQuery使用。

Answer 2

您需要在发出请求之前向其自身添加事件处理程序。 jQuery.ajax允许通过'beforeSend'属性http://api.jquery.com/jQuery.ajax/

例如： http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

*编辑* 请务必查看该示例链接的第二个代码示例。我相信第一个与jQuery的现代版本已经过时了。

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data){
    //Do something success-ish
  }
});

Answer 3

这有点像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
        }

简短回答...是的。希望这会有所帮助：-）

可以使用xhrFields将onprogress功能添加到jQuery.ajax（）吗？

3 个答案: