Jquery+formdata implementation of upload progress effects encountered problems _jquery

Summary I do HTML5 file upload plugin encountered technical problems

First put the source code: Fileupload-html5.js (PS: The company uses the SEAJS framework)

List of issues

1. JQUERY. Ajax has no onprogress events that monitor upload progress.

2. XMLHttpRequest (XHR) cross-domain

Question Answer

1. jquery does not give an interface to the OnProgress event and must find the native XHR object from other interfaces.

Jquery.ajax () returns the Jqxhr object. JQXHR imitates xhr (native), but does not mimic all methods and attributes that implement XHR (such as:. Upload), even though Jqxhr adds a unique method (such as:. Promise ()). So JQXHR is not a superset of XHR.

The following is the interception of JQ internal source code, $.ajax (), which is returned by this JQXHR (forged XMLHttpRequest)
//Fake xhr jqxhr
 = {

  readystate:0,

The XHR upload attribute points to Xmlhttprequestupload (IE10 is Xmlhttprequesteventtarget), and the object's OnProgress event listens for upload progress. Since JQ does not give an API for this feature, JQ some data uploads using XHR, so we can find xhr from other APIs. Binding onprogress Events before XHR send data can achieve upload progress function.

I found two XHR-related properties from the options parameter configuration:

-XHR: Callback to create XMLHttpRequest object.

The XHR () return value is XHR, which is provided to JQ use, that is, the XHR is used to send the data. We can overwrite it with XHR by creating a callback function, and also return XHR, but bind OnProgress event here.

JQ source
//Get a new XHR
var handle, I,
 xhr = S.XHR ();//[callback] here, here is the Open method

//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.u Sername, S.password);
else {
 Xhr.open (S.type, S.url, S.async);
}

So we should do this:

$.ajax ({
 //...
 ..) Xhr:function () {
  var xhr = $.ajaxsettings.xhr ();
  The callback function that binds upload progress
  xhr.upload.addEventListener (' Progress ', progress, false);
  Return xhr;//must be returned, or JQ no XHR object used
 }
});

-Xhrfields: A pair of "filename-file value" mappings, which are used to set native XHR objects.

The Xhrfields property points to the XHR created inside the JQ, and we can get xmlhttprequest based on Xhrfields. Because the value of the xhrfields can only be a JSON object, it cannot be obtained in the following way.

Error example
$.ajax ({
 //...
 ) Xhrfields: {
  upload.onprogress:function () {
   //Syntax error
  }}}
);

We can use the XHR Onsendstart event as follows:

$.ajax ({
 //...
 ) Xhrfields: {
  onsendstart:function () {
   //this is pointing
   to xhr This.upload.addEventListener (' Progress ', Progress, FALSE);
  }
 }
;

2. Xmlhttprequestⅱ (XHR) supports Cross-domain, but requires background permission.

Background need to send head verify
if ($_request[' Cros ']) {
 header ("Access-control-allow-origin: Requested domain name")
;}

According to the background to the interface, I need to add a parameter Cros. But I submit this parameter to my file colleague, but it prompts for cross-domain restrictions. Finally, put this parameter on the URL.

Originally, there were two requests for xhr across domains, the first was authentication requests, and the browser automatically issued the options request based on the requested destination address. If passed, a custom post request can be issued. So put the parameter in the POST request, the first request has no Cros parameters, that is, cannot pass.