ホームページ > 記事 > ウェブフロントエンド > HTMLでの非同期ファイルアップロード例の分析
HTMLでの非同期ファイルアップロード例の分析
- 高洛峰オリジナル
- 2017-03-07 11:21:131014ブラウズ
同じページでサーバーと対話したい場合がありますが、フォームを送信した後に別のページに切り替えたくない場合はどうすればよいでしょうか? フォームを送信するにはいくつかの方法があります
コードは次のとおりです。
<form action="/hehe" method="post"> <input type="text" value="hehe"/> <input type="submit" value="upload" id="upload"/> </form>
これは HTML で最も一般的で最も単純なフォーム送信方法ですが、この方法ではページを切り替える必要があるため、同じページ上でサーバーと対話する必要があり、送信後に別のページに切り替えたくない場合があります。フォームを送信するには、次のような方法があります。
まず、曲線を通じて国を救うためのソリューションを紹介します。上記のコード スニペットを変更する必要はありません。次のコードを追加するだけです。
<iframe id="uploadFrame" name="uploadFrame"></iframe>そして、フォームに target 属性を追加します。 =uploadFrame、target 属性は iframe と同じである必要があります。id の値は同じです (または、name 属性の値は、試してみるとわかります)。
簡単に説明すると、実際、ここのフォームは送信後に更新されますが、なぜページにジャンプしないのでしょうか?実際、iframe で更新したのですが、iframe が空になっているためです。これは、更新がないことを意味します。これは非同期的な方法です。もちろん、この方法は多くの場合に適用できません。完了したフォームを送信した後にサーバーから取得したいと考えていますが、このメソッドは明らかに機能しません。ここでは、真に非同期の送信フォームも必要です。
(2) jqueryの非同期フォーム送信
ここではjquery用のフォーム送信プラグインであるajaxuploadを紹介します
コードは以下の通りです
<body>
<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="button" value="upload" id="upload"/>
<!--<input type="button" value="send" onclick="send()"/>-->
</form>
<script>
(function(){
new AjaxUpload("#upload", {
action: '/hehe',
type:"post",
data: {},
name: 'textfield',
onSubmit: function(file, ext) {
alert("上传成功");
},
onComplete: function(file, response) {
}
});
})();
</script>
</body>ここにメインコードを掲載しています。ページのレンダリングが完了したら、自己実行関数を使用して、upload という ID を持つボタンに非同期アップロード イベントを追加します。 new AjaxUpload(id, object) の ID は、バインドされたオブジェクトの ID に対応します。 2 番目のパラメータは追加データであり、onSubmit 関数はファイルをアップロードする前のコールバック関数です。最初のパラメータ file はファイルのサフィックスです。 onComplete 関数を使用すると、サーバーから返されたデータを処理できます。上記は 2 つの単純なファイル アップロード クライアントの実装です。
HTML での非同期ファイルアップロードのサンプル分析に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。