FormData オブジェクトと Spring MVC を使用して Ajax ファイルのダウンロード機能を実装する (グラフィック チュートリアル)

この記事では、FormData オブジェクトと Spring MVC を使用して Ajax ファイルのダウンロード機能を実装する方法を主に紹介します。必要な方は、

Ajax ファイルのダウンロード

FormData オブジェクトと Spring MVC を使用して Ajax ファイルを実装する方法を参照してください。アップロード関数:

手順

1. コンポーネントをインポートし、静的スクリプトを準備します

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.2</version>
</dependency>
  <h1>Ajax 文件上载</h1>
  <input type="file" id="file1"> <br>
  <input type="file" id="file2"> <br>
  <input type="button" id="upload" value="上载" >
  <p id="result"></p>

1. イベントをボタンにバインドします

2. ファイルを取得します

$("upload").click(ajaxUpload);

3. メモリ上にフォームオブジェクトを作成し、サーバーに転送されたデータを追加します

var file1 = $("#file1")[0].files[0];
var file2 = $("#file2")[0].files[0];

4.ajax() オブジェクトをアップロードします

//创建内存中的表单对象
var form = new FormData();
//向其中添加要传输的数据
form.append("userfile1", file1);
form.append("userfile2", file2);

5 . Spring-MVC プレゼンテーション層

$.ajax({
  url:'user/upload.do',//请求地址
  data: form,   //请求参数
  type: 'POST',  //请求类型
  dataType: 'json',//服务器返回的数据类型
  contentType: false,//没有设置任何内容类型头信息
  processData: false, //见jQuery_api详解
  success: function(obj){ //成功时回调函数,obj表示服务器返回的数据
    if(obj.state==0){
      $('#result').html("成功!"); 
    }
  }
});

以上、皆さんの参考になれば幸いです。

関連記事:

apicloud に基づく AJAX リクエスト コードの収集 (非常に詳細)

Native JS による Ajax クロスドメイン リクエスト フラスコの応答コンテンツの実装 (グラフィック チュートリアル)

Web サイト ハイジャックの Ajax 検出方法

以上がFormData オブジェクトと Spring MVC を使用して Ajax ファイルのダウンロード機能を実装する (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。