ホームページ > 記事 > ウェブフロントエンド > FormData+Ajax はアップロードの進行状況の監視を実装します
FormData タイプは実際には XMLHttpRequest レベル 2 で定義されており、テーブルをシリアル化したり、フォームと同じ形式でデータを作成したりするのに便利です (もちろん XHR 送信用)。次に、この記事を通じて、アップロードの進行状況の監視を実装するための 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) { //失败回调 } });
以上が皆さんの参考になれば幸いです
ajaxfileupload.js (ステップ付き) コード)
php は、ajax
ajaxfileupload.js のヘッダーメソッドとコンテンツインスタンスを取得して、ファイルアップロードを実装します (ステップコード付き)。
以上がFormData+Ajax はアップロードの進行状況の監視を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。