1. 程式人生 > >jquery.form實現ajax上傳檔案同時設定headers

jquery.form實現ajax上傳檔案同時設定headers

function ajaxSubmitForm() {
       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);
}