HTMLでファイルを非同期にアップロードする方法-htmlチュートリアル-php.cn

HTMLでファイルを非同期にアップロードする方法

php中世界最好的语言

リリース： 2018-02-08 09:38:09

オリジナル

2215 人が閲覧しました

今回は、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: &#39;/hehe&#39;, 
type:"post", 
data: {}, 
name: &#39;textfield&#39;, 
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 ページのポップアップウィンドウのパラメーターとは何ですか?

Div の境界線と透明度のスタイルを設定する方法

の無効な margin-top 要素の解決策divタグ

以上がHTMLでファイルを非同期にアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。