Detailed explanation of jQuery Form's implementation of Ajax uploading files and setting headers at the same time

This article mainly introduces the method of jQuery.Form to implement Ajax upload files and set headers at the same time. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

No more nonsense, regarding the method of jquery form to implement ajax upload file, please refer to the example code:

 <span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span>

var option = { 
  　　 url : cache.batchImport, 
 　　 type : 'POST', 
  　　 dataType : 'json', 
  　　 headers : {"token" : localStorage.getItem('token')}, //添加请求头部 
 　　 success : function(data) { 
   　　  console.log('success') 
   
  }, 
  error: function(data) { 
    console.log('error'); 
  } 
 }; 
$("#userForm").ajaxSubmit(option); 
return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交

Encountered a problem. It is necessary to set header information while uploading files. However, form submission can upload files but cannot set headers. Ajax can set headers but cannot upload files. Later, I found jQuery.form from the Internet to achieve this. The code is as above.

Since the file button cannot be styled, a button must be used to trigger the file indirectly, but this cannot be achieved on IE, because IE can only directly trigger the button to implement the function, so the position of the file must be The size is set to the same as the button, but the transparency is set to 0 to cover the button to achieve the requirement of directly triggering the control and be compatible with IE. After compatibility, the style has problems on other browsers.

Compatible with other browser style codes are as follows:

var isIE = navigator.userAgent.indexOf('MSIE')>-1; 
if(!isIE){ 
  $('#filePath').css('z-index',-1); 
}

Related recommendations:

Example sharing Ajax upload file progress bar Codular

Introduction to how JavaScript uses Ajax to upload files

PHP and AJAX upload files

The above is the detailed content of Detailed explanation of jQuery Form's implementation of Ajax uploading files and setting headers at the same time. For more information, please follow other related articles on the PHP Chinese website!