Technical problems encountered by HTML5 file upload plug-in

Summary I do HTML5File uploadTechnical problems encountered by the plug-in

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

Problem List

1. jquery.ajax does not monitor the onprogress event of upload progress.

2. XMLHttpRequest (XHR) cross-domain

Question Answer

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 the jqXHR object. jqXHR imitates XHR (native), but does not imitate all methods and attributes (such as: .upload) that implement XHR, even if jqXHR adds a unique method (such as: .promise()). So jqXHR is not a superset of XHR.

//The following is an interception of the internal source code of jQ. $.ajax(); returns this jqXHR (fake XMLHttpRequest)

// Fake xhr
    jqXHR = {
        readyState: 0,

The upload attribute of XHR points to XMLHttpRequestUpload (IE10 is XMLHttpRequestEventTarget), 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 an 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 source code

// Get a new xhrvar 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 );}
所以我们应该这样做：
$.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 the native XHR object.

The xhrFields attribute points to the XHR created internally by jQ. 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.

//Error example

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

We can use the onsendstart event of XHR, as follows:

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

2. XMLHttpRequestⅡ(XHR) supports cross-domain, but requires a background allow.

//The background needs to send header verification

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 customized 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.

The above is the detailed content of Technical problems encountered by HTML5 file upload plug-in. For more information, please follow other related articles on the PHP Chinese website!