今回は、アップロード進行状況エフェクトを作成するための 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 を返しますが、ここで 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对象用了 } });
//错误例子 $.ajax({ //...... xhrFields: { upload.onprogress: function() { //语法错误 } } });
$.ajax({ //...... xhrFields: { onsendstart: function() { //this是指向XHR this.upload.addEventListener('progress', progress, false); } } });
//后台需发送头部验证 if($_REQUEST['cros']) { header("Access-Control-Allow-Origin:请求的域名"); }
投稿リクエスト を発行できます。したがって、post リクエストにパラメータを入力します。最初のリクエストには cro パラメータがありません。つまり、渡すことができません。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: jQuery EasyUI プラグインを使用してメニュー リンク ボタンを作成する方法
JQuery の jqURL プラグインの使用方法の詳細な説明
以上がjQuery + formdata によるアップロード進行状況エフェクトの作成 (ステップコード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。