HTMLでの非同期ファイルアップロード例の分析-htmlチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-07 11:21:13

オリジナル

1029 人が閲覧しました

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

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

<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 サイトに注目してください。