ホームページ > 記事 > ウェブフロントエンド > HTMLでファイルを非同期にアップロードする方法
HTMLでファイルを非同期にアップロードする方法
- php中世界最好的语言オリジナル
- 2018-02-08 09:38:092193ブラウズ
今回は、HTMLでファイルを非同期でアップロードする方法と、HTMLでファイルを非同期でアップロードする際の注意点を紹介します。実際のケースを見てみましょう。
コードは次のとおりです:
<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 を持つボタンに非同期アップロード イベントを追加します。2 番目と同様に、new AjaxUpload(id, object) の ID はバインドされたオブジェクトの ID に対応します。 onSubmit 関数はファイルをアップロードする前のコールバック関数であり、ext はファイルのサフィックスです。 onComplete 関数を使用すると、サーバーから返されたデータを処理できます。上記は 2 つの単純な
ファイル アップロード クライアントの実装です。 これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
IE Web ページのポップアップ ウィンドウのパラメーターとは何ですか?
以上がHTMLでファイルを非同期にアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。