この記事では、リファレンス用の3つのJava非同期アップロード方法を共有しています。特定のコンテンツは次のとおりです
ブラウザプラグインを使用してアップロードする最初の方法には、特定の基礎となるコーディングスキルが必要です。ここでは、人々の子供たちを誤解させないように、ここでは話しません。これを考慮に入れると、自分でbaiduができます。
2番目のタイプは、非同期アップロードをシミュレートするために隠されたiframeを使用します。なぜここでシミュレーションについて話しているのですか？実際にリターン結果を非表示のiframeに配置するため、現在のページをジャンプしませんでした。これは非同期操作のように感じられました。
<！Doctype html> <HTML> <head> <meta charset = "utf-8"> <title>非表示のiframeアップロードファイル</title> <script = "jquery path ..."> </script> </head> <body> <iframe name = "frm" frm "> </"> < enctype = "multipart/form-data" method = "post"ターゲット= "frm" onsubmit = "loading（true）;"> <p id = "upfile">添付ファイル：<入力タイプ= "ファイル" name = "myfile" stiled = "display"> </p> <p id = "upbtn" type = "value =" susynchronous upload "> <span id =" uptxt "style =" display = "display"> uploading ... </span> </p> </form> <div id = "フリスト"スタイル= "ボーダー：1px点線のダークグレイ;読み込み（false）; } function addToflist（fname）{var temp = ["<p id = '" + fname + "'>"、fname、 "<button onclick = 'delfile（/" " + fname +"/"）;'> delete </button>"、 "</p>"]; $（ "＃flist"）。append（temp.join（ ""））;} function roading（showloading）{if（show -loading）{$（ "＃uptxt"）。show（）; } else {$（ "＃uptxt"）。非表示; }} </script> </body> </html>このテクノロジーには2つの重要なポイントがあります。
1.FORMはターゲットを指定し、提出された結果が非表示のiFrameに返されます。 （つまり、フォームターゲットは、iframeの名前属性と一致しています）。
2。送信が完了した後、iframeのページはメインページと通信します。アップロード結果を通知し、サーバーファイル情報がメインページと通信する方法は？
ファイルを受信した後、nodejsを使用して、window.parentで定義されたメソッドを返します。メインページ。実行後、ファイルのアップロードが完了したことがわかります。コードは非常に簡単です：
router.post（ '/upload2'、multipartmiddleware、function（req、res）{var fpath = req.files.myfile.path; var fname = fpath.substr（fpath.lastindexof（ '//'） + 1）; setimeout（function {var ret = [bar ret = ["<script>" "'）、" </script> "];実行後、開発者オプションを開くことができ、Hidden IFRAMEから返されたデータが返されることがわかります。
3番目のタイプは、実際の非同期アップロードにxmlhttprequest2を使用します。
または最初にコードを投稿してください：
実行後、開発者オプションを開くことができ、Hidden IFRAMEから返されたデータが返されることがわかります。 3番目のタイプは、実際の非同期アップロードにxmlhttprequest2を使用します。最初にコードを投稿しましょう：
<！doctype html> <html> <head> <meta charset = "utf-8"> <title2非同期アップロード</title> <script type = "text/javascript" src = "jQueryパス... style = "display：inline"> </p> <p id = "upbtn"> <input style = "padding-left：50px; padding-right：50px;" type = "button" value = "Asynchronous upload" onclick = "upload;"> <span id = "uptxt" style = "display =" displaing> uploading ... </span> <span id = "upprog"> </span> <ボタンid = "stopbtn" style = "display：none;">停止< darkgray; "> </div> <script> function upload {//1。preakerformdata var fd = new formdata; fd.append（ "myfile"、$（ "＃myfile"）[0] .files [0]）; // xhrオブジェクトを作成するvar xhr = new xmlhttprequest; //ステータスを聞いてリアルタイムで応答する// xhrおよびxhr.uploadには進行状況があります。 console.log（ '％d％'、パーセント）; $（ "＃upprog"）。テキスト（パーセント）; }}; //送信開始イベントxhr.onloadstart = function（event）{console.log（ 'load start'）; $（ "＃upprog"）。text（ '起動アップロード'）; $（ "＃stopbtn"）読み込み（true）; }; // ajaxプロセスは、イベントxhr.onload = function（event）{console.log（ 'load success'）; $（ "＃upprog"）。text（ 'upload success'）; console.log（xhr.responsetext）; var ret = json.parse（xhr.responsetext）; addtoflist（ret.fname）; }; // ajaxプロセスでエラーイベントが発生しましたxhr.onerror = function（event）{console.log（ 'error'）; $（ "＃upprog"）。テキスト（ 'エラーが発生した'）; }; // ajaxはxhr.onabort = function（event）{console.log（ 'abort'）; $（ "＃upprog"）。テキスト（ '操作はキャンセルされた'）; }; // LoadEnd送信は終了し、成功または失敗に関係なくトリガーされますxhr.onloadend = function（event）{console.log（ 'load end'）;読み込み（false）; }; // AJAXリクエストを開始してデータを送信しますxhr.open（ 'post'、 '/upload3'、true）; xhr.send（fd）; } function addToflist（fname）{var temp = ["<p id = '" + fname + "'>"、fname、 "<button onclick = 'delfile（/" " + fname +"/"）;'> delete </button>"、 "</p>"]; $（ "＃flist"）。append（temp.join（ ""））; } function delfile（fname）{console.log（ 'file：' + fname）; // todo：実装してください}関数読み込み（showloading）{if（showloading）{$（ "＃uptxt"）。show（）; $（ "＃stopbtn"）。show（）; } else {$（ "＃uptxt"）。hide（）; $（ "＃stopbtn"）。hide（）; }} </script> </body> </html>多くのコードがありますが、理解しやすいです。 Ajaxを使用した人なら誰でも、XHRオブジェクトがReadedStateChangeコールバックメソッドを提供して、要求/応答プロセス全体を聞くことを知っています。 XMLHTTPREQUESTレベル2仕様には、さらにいくつかの進捗イベントがあります。以下に6つのイベントがあります：
1.LoadStart：応答データの最初のバイトが受信されたときにトリガーされます。
2.プログレス：応答の受容中に連続的にトリガーされます。
3.エラー：リクエストでエラーが発生したときにトリガーされます。
4.abort：中止方法を呼び出すために接続が終了したときにトリガーされます。
5.ロード：完全な応答データが受信されたときにトリガーされます。
6. LoadEnd：通信が完了した後にトリガーされるか、エラー、中止、ロードイベントがトリガーされます。
今回はコードを解釈できます。送信イベントが開始されたら、停止伝送ボタンにクリックイベントを追加し、内蔵のABORTメソッドが送信を停止できます。クリックしないと、送信が完了するまで正常にアップロードされます。その背景コードは、2番目の方法に似ています。
3つの方法には独自の利点と短所があります。簡単な要約を作成しましょう。
サードパーティのコントロールは、最下層に近く、パフォーマンスも優れているため、良好な対話性と制御性を備えています。ただし、書くのが難しいため、通常は自分でプラグインをインストールする必要があります。また、自分で書く必要がある場合があります。
個人的には、非表示のiframeメソッドは非常に思慮深い方法だと思います。 iframeは私たちが多くのことをするのを助けることができます。このアプローチには広範なブラウザの互換性があり、プラグインをインストールする必要はありません。ただし、対話性が低く、制御不能なアップロードプロセスがあり、そのパフォーマンスも非常に平均的です。
XHR2レベルの純粋なAJAXアップロードの場合、より高いバージョン（IE9+）を備えたブラウザが必要です。しかし、それは非常に優れたインタラクティブを持っています、あなたはアップロードの進捗を見ることができ、制御可能です。
開発は、要件に応じて異なる方法で行うことができます。個人的には、これらのファイル、特に2番目のファイルをアップロードすると、特定のHTMLタグの特性を完全に活用するアイデアが提供されると思います。これは、開発者がもっと考える必要があるものかもしれません。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。