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

高洛峰
リリース: 2017-03-07 11:21:13
オリジナル
1009 人が閲覧しました

同じページでサーバーと対話したい場合がありますが、フォームを送信した後に別のページに切り替えたくない場合はどうすればよいでしょうか? フォームを送信するにはいくつかの方法があります

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

<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: &#39;/hehe&#39;, 
type:"post", 
data: {}, 
name: &#39;textfield&#39;, 
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 サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!