これの何が悪いのか教えてください:
var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);
出力は次のようになります。「キー」と「値」のペアが見つかりません
FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }
わかりません!昨日はとてもうまく機能し、今日は私の頭が何度もキーボードをクラッシュさせました! Firefox、Chrome、両方とも同じ:/
Chrome 50+およびFirefox 39+(または44+)の新機能:
formdata.entries()
(デバッグのためにArray.from()
と組み合わせてください)formdata.get(key)
元の回答:
私がFormData
オブジェクトを 'デバッグ'するために通常行うことは、それを(どこでも!)送信し、ブラウザのログを確認することです(例:Chrome devtools '[ネットワーク]タブ)。
同じAjaxフレームワークは必要ありません。詳細は必要ありません。送ってください:
var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);
簡単です。
あなたはそれが機能していないと言います。何が起こると期待していますか?
FormData
オブジェクトからデータを取得する方法はありません。 XMLHttpRequest
オブジェクト(send
メソッドの場合)とともにデータを送信するために使用することを目的としています。
ほぼ5年後の更新:一部の新しいブラウザーでは、これはもはや真実ではなく、データを単に詰め込むだけでなく、FormData
に提供されたデータを見ることができます。 詳細は、受け入れられた回答をご覧ください .
私が最初に抱えていたのと同じ問題を抱えていたかもしれません。 FormDataを使用してすべての入力ファイルを取得して画像をアップロードしようとしましたが、同時にサーバーに渡される情報にセッションIDを追加したかったのです。この間ずっと、情報を追加することで、オブジェクトにアクセスすることでサーバーでそれを見ることができると思いました。私は間違っていた。 FormDataに追加する場合、サーバー上の追加情報を確認する方法は、単純な$_POST['*your appended data*']
クエリを使用することです。そのようです:
js:
$('form').submit(function(){
var sessionID = 8;
var formData = new FormData(this);
formData.append('id', sessionID);
$.ajax({
url: "yoururl.php",
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
});
次に、phpで:
$sessionID = $_POST['id'];
$files = $_FILES['image'];
$foreach ($files as $key=>val){
//...
}
Chromeにいる場合は、投稿データを確認できます
投稿データの確認方法はこちら
console.log(formData.getAll('your key'))
を使用する必要があることがわかります。 https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll をご覧ください
'content-type': 'multipart/form-data'
が付いたヘッダーがあることを確認してください
_handleSubmit(e) {
e.preventDefault();
const formData = new FormData();
formData.append('file', this.state.file);
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
axios.post("/upload", formData, config)
.then((resp) => {
console.log(resp)
}).catch((error) => {
})
}
_handleImageChange(e) {
e.preventDefault();
let file = e.target.files[0];
this.setState({
file: file
});
}
#html
<input className="form-control"
type="file"
onChange={(e)=>this._handleImageChange(e)}
/>
私の場合、Edgeブラウザの場合:
const formData = new FormData(this.form);
for (const [key, value] of formData.entries()) {
formObject[key] = value;
}
同じエラーを教えてください
だから私はFormData
を使用していないので、オブジェクトを手動で作成するだけです
import React from 'react';
import formDataToObject from 'form-data-to-object';
...
let formObject = {};
// Edge compatibility - replace FormData by
for (let i = 0; i < this.form.length; i++) {
if (this.form[i].name) {
formObject[this.form[i].name] = this.form[i].value;
}
}
const data = formDataToObject.toObj(formObject): // convert "user[email]":"[email protected]" => "user":{"email":"[email protected]"}
const orderRes = await fetch(`/api/orders`, {
method: 'POST',
credentials: 'same-Origin',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const order = await orderRes.json();
フォームデータがWebブラウザコンソールに表示されない
for (var data of formData) {
console.log(data);
}
このように試してみてください