HTML での非同期ファイルアップロードの例

<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="submit" value="アップロード" id="アップロード"/>
</フォーム>

これは HTML で最も一般的でシンプルなフォーム送信方法ですが、この方法ではページを切り替える必要があります。同じページでサーバーとやり取りしたい場合があり、フォーム送信後に別のページに切り替えたくない場合があります。どうすればよいでしょうか? フォームを送信するには、いくつかの方法があります。
まず、迂回することで国を救う解決策を紹介します。上記のコードスニペットを変更する必要はありません。次のコードを追加するだけです。

<iframe id="uploadFrame" name="uploadFrame"></iframe>

<本文>
<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="button" value="アップロード" id="アップロード"/>
<!--<input type="button" value="send" onclick="send()"/>-->
</フォーム>
<スクリプト>
（関数（）{
新しいAjaxUpload("#upload", {
アクション: '/hehe',
タイプ:"投稿",
データ： {}、
名前: 'テキストフィールド',
onSubmit: 関数(ファイル、ext) {
alert("アップロードに成功しました");
},
onComplete: 関数(ファイル、レスポンス) {
}
});
})();
</スクリプト>
</本文>