ファイルのアップロードとヘッダーの設定を同時に行う Ajax 実装の jQuery Form の詳細な説明

この記事は主に、Ajax アップロードファイルを実装し、同時にヘッダーを設定するための jQuery.Form のメソッドを紹介します。これは非常に優れており、必要とする友人が参考になれば幸いです。

jquery フォームを使用してファイルのアップロードを実装する方法については、サンプルコードを参照してください:

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

ファイルのアップロード中にヘッダー情報を設定する必要があります。ただし、フォーム送信ではファイルのアップロードはできますが、ヘッダーの設定はできません。その後、インターネットから jQuery.form を見つけて実装しました。

ファイルボタンはスタイルを設定できないため、ファイルを間接的にトリガーするにはボタンを使用する必要がありますが、IEでは機能を実装するためにボタンを直接トリガーすることしかできないため、これはIEでは実現できません。そのため、ファイルの位置とサイズはは button と同じに設定する必要がありますが、コントロールを直接トリガーするという要件を満たし、ie と互換性を持たせるために、ボタンを覆うために透明度が 0 に設定されています。互換性の後、このスタイルは他のブラウザでは問題が発生します。

他のブラウザ スタイル コードとの互換性は次のとおりです:

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

関連する推奨事項:

Ajax アップロード ファイルの共有の例 Codular

JavaScript が Ajax を使用してファイルをアップロードする方法の紹介

PHPおよび AJAX アップロード ファイル

以上がファイルのアップロードとヘッダーの設定を同時に行う Ajax 実装の jQuery Form の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。