[解決済み] FormData インターフェースを実装していないオブジェクトに対して 'append' を呼び出す
2022-11-25 08:40:49
質問
jqueryとajaxで画像をアップロードしようとしています。しかし、奇妙なことがここで起こった。コンソールログに表示されている
TypeError: 'append' は実装されていないオブジェクトで呼び出されました。 インターフェイスFormDataを実装していないオブジェクトで呼び出されました。
私はここで何が間違っていたのか教えてください。
JSスクリプト
var prosrc=$("#pro_pix img").last().attr("src");
$("#logoform").on('change',function(event){
var postData = new FormData(this);
$("#pro_pix img").last().hide();
$("#pro_pix img").first().show();
event.preventDefault();
$.ajax(
{
url : "/function/pro_pic_upload.php",
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$("#pro_pix img").last().show();
$("#pro_pix img").first().hide();
$("#pro_pix h6").text(data);
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
});
私のHTMLマークアップ
<div class="row">
<!-- left column -->
<div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12">
<div class="text-center">
<img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar">
<img src="<?php echo $rowuser['profile_logo']; ?>" class="avatar img-circle img-thumbnail" alt="avatar">
<h6>Upload a different photo...</h6>
<form role="form" id="logoform" enctype="multipart/form-data">
<input id="logo" name="logo" type="file" class="text-center center-block well well-sm">
</form>
</div>
</div>
どのように解決するのですか?
jqueryでformdataを使用するには、正しいオプションを設定する必要があります。
$.ajax({
url : "/function/pro_pic_upload.php",
type: "POST",
data : postData,
processData: false,
contentType: false,
success:function(data, textStatus, jqXHR){
$("#pro_pix img").last().show();
$("#pro_pix img").first().hide();
$("#pro_pix h6").text(data);
},
error: function(jqXHR, textStatus, errorThrown){
//if fails
}
});
processData (デフォルト: true)
タイプ ブール値
デフォルトでは、データオプションに渡されるデータは にオブジェクトとして渡されたデータ (技術的には として渡されたデータは、処理されてクエリー文字列に変換されます。 デフォルトのコンテントタイプである "application/x-www-form-urlencoded" に適合するように処理され、クエリー文字列に変換されます。もし DOMDocument やその他の非処理データを送信したい場合は、このオプションを オプションを false に設定してください。
関連
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Javascriptの配列に、指定された値に等しい属性を持つオブジェクトが含まれているかどうかを判断するにはどうすればよいですか?
-
[解決済み] JavaScriptはオブジェクトのプロパティの順序を保証するか?
-
[解決済み] ECMAScript 6 オブジェクトを返す矢印関数
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み] JSのDateからDay名
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] JSHintの'+'前の改行不良の説明
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryのAjax-requestsでFormDataオブジェクトを送信する方法は?[重複している]をクリックします。
-
[解決済み] JSのDateからDay名
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?