BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. AJAX関連

フォームデータを用いた AJAX アップロードファイルストリーム

2022-01-18 04:18:45

本日、ファイルストリームのajaxアップロードを含むプロジェクトに取り組んでいたところ、2つのモバイルページの2つのフォームが同じajaxアドレスを使用してバックエンドにデータをアップロードし、そのデータには異なるタイプの入力が含まれており、その中にファイルタイプの入力があったため、フォームシリアライズを使って直接データを転送することができなくなりました。

一般的なパラメータしか渡されない場合は、$("#form id").serialize() でフォームをシリアライズすることで、フォーム内のすべてのパラメータがサーバーに渡されるようにすることができます。ファイルをアップロードするためのファイルストリームはシリアライズして渡すことができないので、formDataのオブジェクトをファイルアップロードに使用します。formdataの具体的な使い方は、以下を参照してください。 公式サイト

プレ 
//html is as follows
//form1
<form class="col-xs-12 register-form" id="registerForm" method="post" action="">
 <div class="form-group col-xs-wap tc">
 <div class="col-xs-2">
 <i class="icon i-store"></i>
 </div>
 <div class="col-xs-10">
 <input type="text" class="form-control" placeholder="shopName" id="shopName" name="shopName ">
 </div>
 </div>
 <div class="form-group col-xs-wap tc">
 <div class="col-xs-2">
 <i class="icon i-user"></i>
 </div>
 <div class="col-xs-10">
 <input type="text" class="form-control" placeholder="my name" id="name" name="name"& gt;
 </div>
 </div>
</form>
//form2
<form action="" method="post" class="mt10" id="registerForm2">
 <input id="frontPhoto" name="frontPhoto"/>
 <input id="backPhoto" name="backPhoto"/>
 <input id="handlePhoto" name="handlePhoto"/>
</form>

上記は、ajaxアップロードファイルのストリームと一般的なパラメータを実装しています。これは2つの主要な側面を含んでいます。

  1. 異なるページの異なるフォームを同じボタンに配置し、サーバーへの同じajax転送をトリガーする必要があり、最初にフォームデータを保存するためにクッキーを使用します。面倒で安全でないかもしれませんが、今のところこの方法しか思いつきません。 {何か良い方法があれば教えてください。
  2. ajaxアップロードファイルのストリームは、に注意を払う var fd=new FormData($("#form id")[0]);[0] 持って来なければならない、私はちょうどこのために丸一日を得ました。

詳しくは、トピックを参照してください。 ajaxアップロードのテクニックまとめ は、その javascriptによるファイルアップロード操作のまとめ と jQueryアップロード操作のまとめ を学ぶことができます。

この記事がお役に立てれば幸いです。また、スクリプト・ハウスを応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します