jQuery+formdata creates upload progress effects (with step code)-JS Tutorial-php.cn

jQuery+formdata creates upload progress effects (with step code)

php中世界最好的语言

Release： 2018-04-26 11:20:35

Original

1856 people have browsed it

This time I will bring you jQuery formdata to make upload progress special effects (with step codes). What are the precautions for jQuery formdata to make upload progress special effects? . Here is a practical case. Let’s take a look. .

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 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,

Copy after login

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 );
}

Copy after login

So we should do this:

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

Copy after login

- XHRFIELDS: A pair of "file name-file value" mapping, 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.

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

Copy after login

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

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

Copy after login

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

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

Copy after login

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 prompted a cross-domain restriction. 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!