jQuery + formdata によるアップロード進行状況エフェクトの作成 (ステップコード付き)-jsチュートリアル-php.cn

jQuery + formdata によるアップロード進行状況エフェクトの作成 (ステップコード付き)

php中世界最好的语言

リリース： 2018-04-26 11:20:35

オリジナル

1868 人が閲覧しました

今回は、アップロード進行状況エフェクトを作成するための jQuery+formdata を紹介します (ステップコード付き)。jQuery+formdata を使用してアップロード進行状況エフェクトを作成する際の注意事項について説明します。実際のケースを見てみましょう。

問題リスト

1. JQUERY.AJAX はアップロードの進行状況を示す ONPROGRESS イベントを監視しません。

2. XMLHTTPREQUEST (XHR) クロスドメイン

質問と回答

1. JQUERY は ONPROGRESS イベントのインターフェイスを提供しないため、ネイティブ XHR オブジェクトは他のインターフェイスから見つける必要があります。

jQuery.ajax() は jqXHR オブジェクトを返します。 jqXHR は XHR (ネイティブ) を模倣しますが、jqXHR が独自のメソッド (.promise() など) を追加する場合でも、XHR を実装するすべてのメソッドと属性 (.upload など) を模倣するわけではありません。したがって、jqXHR は XHR のスーパーセットではありません。

//下面是截取jQ内部的源码，$.ajax();返回的就是这个jqXHR（伪造XMLHttpRequest）
// Fake xhr
 jqXHR = {
  readyState: 0,

ログイン後にコピー

XHRのupload属性はXMLHttpRequestUpload(IE10はXMLHttpRequestEventTarget)を指しており、このオブジェクトのonprogressイベントでアップロードの進行状況を監視することができます。 jQ はこの関数の API を提供していないため、jQ の一部のデータアップロードメソッドは XHR を使用するため、他の API から XHR を見つけることができます。 XHR がデータを送信する前に onprogress イベントをバインドすると、アップロード進行状況関数を実装できます。

OPTIONS パラメーター設定から XHR に関連する 2 つのプロパティを見つけました:

-XHR: コールバックは XMLHTTPREQUEST オブジェクトを作成します。

xhr() の戻り値は XHR であり、jQ が使用するために提供されます。つまり、この XHR はデータの送信に使用されます。 xhr を介して

コールバック関数を作成してオーバーライドすることもできます。また、XHR を返しますが、ここで onprogress イベントをバインドします。

//jQ源码
// Get a new xhr
var handle, i,
 xhr = s.xhr();//[回调]在这里，下面是open方法
// Open the socket
// Passing null username, generates a login popup on Opera (#2865)
if ( s.username ) {
 xhr.open( s.type, s.url, s.async, s.username, s.password );
} else {
 xhr.open( s.type, s.url, s.async );
}

ログイン後にコピー

したがって、これを行う必要があります:

$.ajax({
 //.....
 xhr: function() {
  var xhr = $.ajaxSettings.xhr();
  //绑定上传进度的回调函数
  xhr.upload.addEventListener('progress', progress, false);
  return xhr;//一定要返回，不然jQ没有XHR对象用了
 }
});

ログイン後にコピー

- XHRFIELDS: ネイティブ XHR オブジェクトを設定するために使用される、「ファイル名とファイル値」のペアで構成されるマッピング。

xhrFields 属性は、jQ によって内部的に作成された XHR を指し、xhrFields に基づいて XMLHttpRequest を取得できます。 xhrFields の値は json オブジェクトしか取り得ないため、以下の方法では取得できません。

//错误例子
$.ajax({
 //......
 xhrFields: {
  upload.onprogress: function() {
   //语法错误
  }
 }
});

ログイン後にコピー

XHR の onsendstart イベントを次のように使用できます:

$.ajax({
 //......
 xhrFields: {
  onsendstart: function() {
   //this是指向XHR
   this.upload.addEventListener('progress', progress, false);
  }
 }
});

ログイン後にコピー

2. XMLHTTPREQUESTⅡ(XHR) はクロスドメインをサポートしますが、バックグラウンド権限が必要です。

//后台需发送头部验证
if($_REQUEST['cros']) {
 header("Access-Control-Allow-Origin:请求的域名");
}

ログイン後にコピー

背景によって提供されるインターフェイスによると、パラメータ cro を追加する必要があります。しかし、このパラメータをファイルとともに送信すると、クロスドメインの制限を求めるプロンプトが表示されました。最後に、このパラメータを URL に入力します。

XHR には 2 つのクロスドメインリクエストがあることがわかりました。1 つは、リクエストの宛先アドレスに基づいて、ブラウザが自動的にオプションリクエストを発行することです。合格すると、カスタマイズされた

投稿リクエストを発行できます。したがって、post リクエストにパラメータを入力します。最初のリクエストには cro パラメータがありません。つまり、渡すことができません。

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

推奨読書:

jQuery EasyUI プラグインを使用してメニューリンクボタンを作成する方法

JQuery の jqURL プラグインの使用方法の詳細な説明

以上がjQuery + formdata によるアップロード進行状況エフェクトの作成 (ステップコード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。