html_HTML/Xhtml_Web ページ制作における非同期ファイルアップロードの例

コードをコピーします

コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

これは HTML で最も一般的で最も単純なフォーム送信メソッドですが、このメソッドではページを切り替える必要がある場合があります。同じページ上でサーバーと対話する必要があり、別のページに切り替えたくない場合もあります。フォームを送信した後、どうすればよいですか? フォームを送信するにはいくつかの方法があります。
まず、曲線を通じて国を救うソリューションを紹介します。上記のコード スニペットを変更する必要はありません。次のコードを追加するだけです。

<🎜。 >コードをコピーしますコードは次のとおりです:

そして、target=uploadFrame という形式でターゲット属性を追加します。ターゲット属性は、iframe の ID の値 (または name 属性の値であることがわかります) と一致している必要があります。試してみた後）。

簡単に説明すると、実際、ここのフォームは送信後に更新されますが、なぜページにジャンプしないのでしょうか?実際には、この iframe で更新したためです。 iframe が空であるということは、非同期感を与えるのと同じであり、これは正統的な方法ではありませんが、もちろん、多くの場合、この方法は適用できません。たとえば、サーバーから何かを取得した後に、完了したフォームを送信したいとします。ここでは、テーブルを完全に非同期に送信する必要もあります。

(2) jquery の非同期フォーム送信

ここでは、jquery のフォーム送信プラグインである ajaxupload を紹介します。その使い方は比較的簡単です

コードをコピーしますコードは次のとおりです:

🎜>

🎜>( function(){
new AjaxUpload("#upload", {
action: '/hehe',
type: "post",
data: {},
name : 'textfield ',
onSubmit: function(file, ext) {
alert("アップロード成功")
},
onComplete: function(file, response) {
}
} );
})();



メインのコードはここに掲載されます。完了したら、自己実行関数を使用して、アップロードの ID を持つボタンに非同期アップロード イベントを追加します。 new AjaxUpload(id, object) の ID は、2 番目のパラメーターと同様に、バインドされたオブジェクトの ID に対応します。 data は追加データです。onSubmit 関数はファイルをアップロードする前のコールバック関数です。onComplete 関数と同様に、ext はファイル拡張子です。サーバーで処理できます。上記は 2 つの単純なファイル アップロード クライアントの実装です。