Problems encountered by jQuery+formdata in implementing upload progress effects_jquery

Summary of the technical problems I encountered when building the HTML5 file upload plug-in

First paste the source code: fileupload-html5.js (PS: The company uses seajs framework)

Question List

1. JQUERY.AJAX does not monitor the ONPROGRESS event of upload progress.

2. XMLHTTPREQUEST (XHR) cross-domain

Q&A

1. JQUERY does not provide an interface for the ONPROGRESS event, and the native XHR object must be found from other interfaces.

jQuery.ajax() returns a jqXHR object. jqXHR imitates XHR (native), but does not imitate all methods and attributes that implement XHR (such as: .upload), even if jqXHR adds a unique method (such as: .promise()). So jqXHR is not a superset of XHR.

//下面是截取jQ内部的源码，$.ajax();返回的就是这个jqXHR（伪造XMLHttpRequest）
// Fake xhr
 jqXHR = {

  readyState: 0,

The upload attribute of XHR points to XMLHttpRequestUpload (IE10 is XMLHttpRequestEventTarget), and the onprogress event of this object can monitor the upload progress. Since jQ does not provide an API for this function, some data upload methods of jQ use XHR, so we can find XHR from other APIs. Binding the onprogress event before XHR sends data can implement the upload progress function.

I found two properties related to XHR from the OPTIONS parameter configuration:

- XHR: Callback creates XMLHTTPREQUEST object.

The return value of xhr() is XHR, which is provided for jQ to use, that is, this XHR is used to send data. We can create a callback function through xhr to overwrite it, also return XHR, but bind the onprogress event here.

//jQ源码
// Get a new xhr
var handle, i,
 xhr = s.xhr();//[回调]在这里，下面是open方法

// Open the socket
// Passing null username, generates a login popup on Opera (#2865)
if ( s.username ) {
 xhr.open( s.type, s.url, s.async, s.username, s.password );
} else {
 xhr.open( s.type, s.url, s.async );
}

So we should do this:

$.ajax({
 //.....
 xhr: function() {
  var xhr = $.ajaxSettings.xhr();
  //绑定上传进度的回调函数
  xhr.upload.addEventListener('progress', progress, false);
  return xhr;//一定要返回，不然jQ没有XHR对象用了
 }
});

- XHRFIELDS: A mapping consisting of a pair of "file name-file value", used to set native XHR objects.

The xhrFields attribute points to the XHR created internally by jQ, and we can obtain the XMLHttpRequest based on xhrFields. Since the value of xhrFields can only be a json object, it cannot be obtained in the following way.

//错误例子
$.ajax({
 //......
 xhrFields: {
  upload.onprogress: function() {
   //语法错误
  }
 }
});

We can use XHR’s onsendstart event, as follows:

$.ajax({
 //......
 xhrFields: {
  onsendstart: function() {
   //this是指向XHR
   this.upload.addEventListener('progress', progress, false);
  }
 }
});

2. XMLHTTPREQUESTⅡ(XHR) supports cross-domain, but requires background permission.

//后台需发送头部验证
if($_REQUEST['cros']) {
 header("Access-Control-Allow-Origin:请求的域名");
}

According to the interface provided by the background, I need to add a parameter cros. But when I submitted this parameter with the file, it was prompted for cross-domain restrictions. Finally, put this parameter in the url.

It turns out that XHR has two cross-domain requests. The first is a verification request. The browser automatically issues an options request based on the request destination address. If passed, a custom post request can be issued. So put the parameters in the post request. The first request does not have the cros parameter, that is, it cannot pass.