jquery+HTML5+Ajaxはプログレスバー付きのファイルアップロード機能を実装します

今回は、プログレスバー付きのファイルアップロード機能を実装するためのjquery+HTML5+Ajaxについて説明します。実際のケースを見てみましょう。 まず、HTML5 で AJAX を使用してデータを送信するには、まず HTML5 で新しく追加されたオブジェクトである FormData について学習する必要があります。FormData オブジェクトは、append メソッドを使用してキーと値のデータを追加できます。これは、私たちが一般的に使用する JSON との違いです。以前は、バイナリ ファイルを非同期でアップロードできることが使用されていました。

1. FormDate オブジェクトの作成

var formData = new FormData();

2. FormDate オブジェクトにデータを追加

formData.append("catname", "我是一只喵");
formData.append("age", 1); 　　　　　　　　// 数字类型会转为字符串类型
// 可以增加上传的二进制文件，比如fileInputElement对象中已经包含了用户所选择的文件
formData.append("userfile", fileInputElement.files[0]);
//也可以将一个 Blob 对象添加到 formData 中
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; 
var oBlob = new Blob([oFileBody], { type: "text/xml"});
formData.append("webmasterfile", oBlob);

HTML 部分を簡単に紹介します

ページの HTML コードがどのように記述されているか見てみましょう

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(formData);

下部の p はプログレスバーを表示するために使用されるため、対応する CSS スタイルが必要です。スタイルは次のとおりです。色は見栄えがよくないので、自分で変更します。

<img width="400" height="250"/><br /> 
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br /> 
<p id="parent">
 <p id="son"></p>
</p>

JS 部分

ここがハイライトです。ページに jquery をロードした後、JavaScript がどのように記述されているかを見てみましょう。ファイルコンポーネントの onchange イベントメソッド:

<style type="text/css"> 
 #parent{width:550px; height:10px; border:2px solid #09F;} 
 #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
</style>

showPic の最初の行は、アップロードされたファイルをファイルオブジェクトから取得することです。 2 行目では、img の src 属性を設定します。 ページ上の効果を即座にプレビューできます。

uploadFile メソッドを説明する前に、進捗イベント (Progress Events) の進行状況について簡単に学びましょう... Progress Events 仕様は W3C の作業草案であり、クライアントとサーバーの通信に関連する側面を定義しています。イベント。これらのイベントは当初 XHR 操作を対象としていましたが、現在は他の API でも使用されています。進行イベントは以下の6つです。

loadstart: 対応するデータの最初のバイトが受信されたときにトリガーされます。

progress: 応答を受信して​​いる間、継続的にトリガーされます。 // 1 つの

error を見てみましょう: リクエストでエラーが発生したときにトリガーされます。

abort: abort() メソッドの呼び出しによりリンクが終了するとトリガーされます。

load: 完全な対応するデータが受信されたときにトリガーされます。

loadend: 通信が完了するか、エラー、中止、またはロードイベントがトリガーされた後にトリガーされます。

進行状況イベントは Mozilla によって送信され、ブラウザーが新しいデータを受信するときに定期的にトリガーされます。 onprogress

イベント処理
プログラムは、ターゲット属性がXHRオブジェクトであるイベントオブジェクトを受け取りますが、次の3つの追加属性が含まれています:

lengthComputable: 進行状況情報が利用可能かどうかを示すブール値

position: 受信済みであることを示すバイト数

totalSize: 対応する Content-Length ヘッダーに基づいて決定される予想されるバイト数を示します。 この情報を使用して、ユーザー向けの進行状況インジケーターを作成できます。しかし、問題は再び発生します。jQuery の ajax メソッドには、progress イベントに対する操作がありません。これはどうなるのでしょうか~~

幸い情報を確認したところ、jQueryのajaxメソッドで呼び出されるXMLHttpRequestオブジェクトを指定できることが分かりました！ ！ ！

8453 行目をご覧ください。以上です。したがって、コードは、uploadFile メソッドの ajax 部分でこのスタイルになります。

コードの最も重要な部分:

function showPic(){
 var pic = $("#pic").get(0).files[0];
 $("img").prop("src" , window.URL.createObjectURL(pic) );
}

最後に、onprogress メソッドを追加して関数全体を終了します。

function uploadFile(){
　　
　　// 获取上传文件，放到 formData对象里面
　　var pic = $("#myhead").get(0).files[0];
　　var formData = new FormData();
 formData.append("file" , pic);
　　$.ajax({
　　　　type: "POST",
　　　　url: "upload",
　　　　data: formData ,　　//这里上传的数据使用了formData 对象
　　　　processData : false, 
　　　　//必须false才会自动加上正确的Content-Type 
　　　　contentType : false , 
　　　　
　　　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
　　　　xhr: function(){
　　　　　　var xhr = $.ajaxSettings.xhr();
　　　　　　if(onprogress && xhr.upload) {
　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false);
　　　　　　　　return xhr;
　　　　　　}
　　　　} 
　　});
}

最後に、比較しやすいようにページ全体のコードを添付します。

/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
　　var loaded = evt.loaded;     //已经上传大小情况 
 var tot = evt.total;      //附件总大小 
 var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
　　$("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ファイルアップロード手順のJquery+LigerUI実装の詳細な説明

jQueryによるjsファイルの動的ロードの詳細な説明

jQueryがXMLファイルのコンテンツを読み取る方法

以上がjquery+HTML5+Ajaxはプログレスバー付きのファイルアップロード機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。