jQuery Form實作Ajax上傳檔案同時設定headers詳解

本文主要介紹了jQuery.Form實作Ajax上傳檔案同時設定headers的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下，希望能幫助到大家。

廢話不多說了，關於jquery form實作ajax上傳檔案的方法，大家參考一下實例程式碼吧：

 <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阻止表单再次提交

遇到一個問題，要在上傳文件的同時設定headers信息，但form表單提交可以上傳文件不能設定headers，ajax可以設定headers不能上傳文件，後來從網路上找到了jQuery.form可以實現，代碼如上。

由於file按鈕無法設定樣式，所以要用一個按鈕來間接觸發file，但這在ie上不能實現，因為ie只可以直接觸發按鈕實現功能，所以要把file的位置和大小設定為和button一樣，但透明度設定為0覆蓋在button達到直接觸發控制的要求相容ie。相容後樣式在其他瀏覽器上又有問題了。

相容於其他瀏覽器樣式程式碼如下：

##

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

相關推薦：

實例分享Ajax上傳檔案進度條Codular

JavaScript如何利用Ajax上傳檔案的方法介紹

#PHP和AJAX上傳檔案

#

以上是jQuery Form實作Ajax上傳檔案同時設定headers詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！