FormData+Ajax アップロード進捗監視 (コード付き)

今回は、FormData+Ajax アップロードの進行状況監視 (コード付き) についてご紹介します。FormData+Ajax アップロードの進行状況監視の 注意事項 について、実際のケースを見てみましょう。

FormDataとは何ですか?

FormData オブジェクトは、XMLHttpRequest を使用してリクエストを送信するためのキーと値のペアのセットを組み立てることができます。フォームとは独立して使用できるため、フォーム データの送信がより柔軟で便利になります。フォームのエンコーディング タイプを multipart/form-data に設定した場合、FormData を通じて送信されるデータ形式は、submit() メソッドを通じてフォームによって送信されるデータ形式と同じになります。

FormData オブジェクトの作成方法

次のように、FormData オブジェクトを自分で作成し、その append() メソッドを呼び出してフィールドを追加できます。

//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框，由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

注: 「userfile」フィールドと「webmasterfile」フィールドには両方ともファイルが含まれています。数値型であり、FormData.append() メソッドによって文字列型に変換されます (FormData オブジェクトのフィールド型は Blob、File、または string です。そのフィールド型が Blob でも File でもない場合は、文字列型に変換します

jQuery の Ajax メソッドを使用して FormData データを送信します

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
 url: 'Url',
 type: "POST",
 data: formData,
 contentType: false, // 必须 不设置内容类型
 processData: false, // 必须 不处理数据
 xhr: function xhr() {
  //获取原生的xhr对象
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   //添加 progress 事件监听
   xhr.upload.addEventListener('progress', function (e) {
    var nowDate = new Date().getTime();
    //每一秒刷新一次状态
    if (nowDate - time >= 1000) {
     //已上传文件字节数/总字节数
     percentage = parseInt(e.loaded / e.total * 100);
     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
     velocity = (e.loaded - loaded) / 1024;
     if (percentage >= 99) {
      $(".hintText").html('服务端正在解析，请稍后');
     } else {
      //修改上次记录时间及数据大小
      time = nowDate;
      loaded = e.loaded;
     }
    } else {
     return;
    }
   }, false);
  }
  return xhr;
 },
 success: function success(response) {
  //成功回调   
 },
 error: function error(error) {
  //失败回调    
 }
});

この記事の事例を読んだ後は、メソッドを習得したと思います。さらに興味深い内容をご覧ください。 PHP 中国語 Web サイトの他の関連記事へ!

推奨読書:

更新ドロップダウン連携なしの Ajax+サーブレットの実装 (コード付き)

Ajax を使用してユーザー名が重複しているかどうかを非同期的にチェックする方法

以上がFormData+Ajax アップロード進捗監視 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。