반응형
어레이를 FormData에 추가하고 AJAX를 통해 전송
배열, 텍스트 필드 및 파일이 포함된 멀티파트 양식을 제출하기 위해 Ajax를 사용하고 있습니다.
이렇게 각 VAR을 메인 데이터에 추가합니다.
var attachments = document.getElementById('files');
var data= new FormData();
for (i=0; i< attachments.files.length; i++){
data.append('file', attachments.files[i]);
console.log(attachments.files[i]);
data.append ('headline', headline);
data.append ('article', article);
data.append ('arr', arr);
data.append ('tag', tag);
그런 다음 Ajax 함수를 사용하여 SQL DB에 저장할 PHP 파일로 보냅니다.
$.ajax({
type: "post",
url: 'php/submittionform.php',
cache: false,
processData: false,
contentType: false,
data: data,
success: function(request) {$('#box').html(request); }
})
PHP가arr이치노
보내지 에이잭스를 하는 $.POST옵션 PHP측에서는 어레이로서 취득할 수 있습니다만, 그 후에는 파일도 송신할 수 없습니다.
해결방법이 있나요?
, 은, 「배열하다」를 할 수 있습니다.FormData 방법 명령어:
var formData = new FormData;
var arr = ['this', 'is', 'an', 'array'];
for (var i = 0; i < arr.length; i++) {
formData.append('arr[]', arr[i]);
}
console.log(...formData); 쓰면 요.arr[]간단한 HTML 양식과 동일한 방법으로 작업을 수행할 수 있습니다.PHP의 경우 동작합니다.
이 문서는 도움이 될 수 있습니다.쿼리 문자열 내에서 어레이를 전달하려면 어떻게 해야 합니까?
몇 가지 옵션이 있습니다.
JSON 문자열로 변환한 다음 PHP로 구문 분석합니다(권장).
JS
var json_arr = JSON.stringify(arr);
PHP
$arr = json_decode($_POST['arr']);
또는 @Cuios의 메서드를 사용합니다.
어레이를 FormData.
권장 안 함:PHP를 사용하여 데이터를 직렬화한 다음 직렬화를 해제합니다.
JS
// Use <#> or any other delimiter you want
var serial_arr = arr.join("<#>");
PHP
$arr = explode("<#>", $_POST['arr']);
타이프스크립트 버전:
export class Utility {
public static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {
let formData = form || new FormData();
let formKey;
for (let propertyName in model) {
if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;
let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
if (model[propertyName] instanceof Date)
formData.append(formKey, model[propertyName].toISOString());
else if (model[propertyName] instanceof Array) {
model[propertyName].forEach((element, index) => {
const tempFormKey = `${formKey}[${index}]`;
this.convertModelToFormData(element, formData, tempFormKey);
});
}
else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File))
this.convertModelToFormData(model[propertyName], formData, formKey);
else
formData.append(formKey, model[propertyName].toString());
}
return formData;
}
}
사용방법:
let formData = Utility.convertModelToFormData(model);
오래된 질문이지만 최근에 파일과 함께 오브젝트를 게시하는 문제에 부딪혔습니다.오브젝트 및 어레이인 아이 속성을 포함한 오브젝트를 투고할 수 있어야 했습니다.
다음 함수는 개체를 통과하여 올바른 formData 개체를 만듭니다.
// formData - instance of FormData object
// data - object to post
function getFormData(formData, data, previousKey) {
if (data instanceof Object) {
Object.keys(data).forEach(key => {
const value = data[key];
if (value instanceof Object && !Array.isArray(value)) {
return this.getFormData(formData, value, key);
}
if (previousKey) {
key = `${previousKey}[${key}]`;
}
if (Array.isArray(value)) {
value.forEach(val => {
formData.append(`${key}[]`, val);
});
} else {
formData.append(key, value);
}
});
}
}
그러면 다음 json이 변환됩니다.
{
name: 'starwars',
year: 1977,
characters: {
good: ['luke', 'leia'],
bad: ['vader'],
},
}
다음 FormData로 변환
name, starwars
year, 1977
characters[good][], luke
characters[good][], leia
characters[bad][], vader
FormData에 모든 유형 입력 추가
const formData = new FormData();
for (let key in form) {
Array.isArray(form[key])
? form[key].forEach(value => formData.append(key + '[]', value))
: formData.append(key, form[key]) ;
}
또 here here른른른른른른 here here here 。convertModelToFormData을 사용하다
utility.displicate
const Utility = {
convertModelToFormData(val, formData = new FormData, namespace = '') {
if ((typeof val !== 'undefined') && val !== null) {
if (val instanceof Date) {
formData.append(namespace, val.toISOString());
} else if (val instanceof Array) {
for (let i = 0; i < val.length; i++) {
this.convertModelToFormData(val[i], formData, namespace + '[' + i + ']');
}
} else if (typeof val === 'object' && !(val instanceof File)) {
for (let propertyName in val) {
if (val.hasOwnProperty(propertyName)) {
this.convertModelToFormData(val[propertyName], formData, namespace ? `${namespace}[${propertyName}]` : propertyName);
}
}
} else if (val instanceof File) {
formData.append(namespace, val);
} else {
formData.append(namespace, val.toString());
}
}
return formData;
}
}
export default Utility;
my-client-code.displaces 를 지정합니다.
import Utility from './utility'
...
someFunction(form_object) {
...
let formData = Utility.convertModelToFormData(form_object);
...
}
다음 버전은 단순한 값의 aray를 포함하는 모델에 대해 유효합니다.
function convertModelToFormData(val, formData = new FormData(), namespace = '') {
if((typeof val !== 'undefined') && (val !== null)) {
if(val instanceof Date) {
formData.append(namespace, val.toISOString());
} else if(val instanceof Array) {
for(let element of val) {
convertModelToFormData(element, formData, namespace + '[]');
}
} else if(typeof val === 'object' && !(val instanceof File)) {
for (let propertyName in val) {
if(val.hasOwnProperty(propertyName)) {
convertModelToFormData(val[propertyName], formData, namespace ? namespace + '[' + propertyName + ']' : propertyName);
}
}
} else {
formData.append(namespace, val.toString());
}
}
return formData;
}
중첩된 개체와 배열이 있는 경우 FormData 개체를 채우는 가장 좋은 방법은 재귀를 사용하는 것입니다.
function createFormData(formData, data, key) {
if ( ( typeof data === 'object' && data !== null ) || Array.isArray(data) ) {
for ( let i in data ) {
if ( ( typeof data[i] === 'object' && data[i] !== null ) || Array.isArray(data[i]) ) {
createFormData(formData, data[i], key + '[' + i + ']');
} else {
formData.append(key + '[' + i + ']', data[i]);
}
}
} else {
formData.append(key, data);
}
}
@YackY 응답 단축 재귀 버전에 따라:
function createFormData(formData, key, data) {
if (data === Object(data) || Array.isArray(data)) {
for (var i in data) {
createFormData(formData, key + '[' + i + ']', data[i]);
}
} else {
formData.append(key, data);
}
}
사용 예:
var data = {a: '1', b: 2, c: {d: '3'}};
var formData = new FormData();
createFormData(formData, 'data', data);
송신 데이터:
data[a]=1&
data[b]=2&
data[c][d]=3
3가지 형식의 데이터를 Form Data로 변환합니다.
1. 문자열, 숫자 또는 부울과 같은 단일 값
let sampleData = {
activityName: "Hunting3",
activityTypeID: 2,
seasonAssociated: true,
};
2. 객체 배열이 되는 배열
let sampleData = {
activitySeason: [
{ clientId: 2000, seasonId: 57 },
{ clientId: 2000, seasonId: 57 },
],
};
3. 객체 보유 키 값 쌍
let sampleData = {
preview: { title: "Amazing World", description: "Here is description" },
};
우리의 삶을 편하게 해주는 것:
function transformInToFormObject(data) {
let formData = new FormData();
for (let key in data) {
if (Array.isArray(data[key])) {
data[key].forEach((obj, index) => {
let keyList = Object.keys(obj);
keyList.forEach((keyItem) => {
let keyName = [key, "[", index, "]", ".", keyItem].join("");
formData.append(keyName, obj[keyItem]);
});
});
} else if (typeof data[key] === "object") {
for (let innerKey in data[key]) {
formData.append(`${key}.${innerKey}`, data[key][innerKey]);
}
} else {
formData.append(key, data[key]);
}
}
return formData;
}
예: 데이터 입력
let sampleData = {
activityName: "Hunting3",
activityTypeID: 2,
seasonAssociated: true,
activitySeason: [
{ clientId: 2000, seasonId: 57 },
{ clientId: 2000, seasonId: 57 },
],
preview: { title: "Amazing World", description: "Here is description" },
};
출력 폼 데이터:
activityName: Hunting3
activityTypeID: 2
seasonAssociated: true
activitySeason[0].clientId: 2000
activitySeason[0].seasonId: 57
activitySeason[1].clientId: 2000
activitySeason[1].seasonId: 57
preview.title: Amazing World
preview.description: Here is description
나는 타이프 원고를 수정했다.javascript의 경우 유형 정의만 제거하면 됩니다.
_getFormDataKey(key0: any, key1: any): string {
return !key0 ? key1 : `${key0}[${key1}]`;
}
_convertModelToFormData(model: any, key: string, frmData?: FormData): FormData {
let formData = frmData || new FormData();
if (!model) return formData;
if (model instanceof Date) {
formData.append(key, model.toISOString());
} else if (model instanceof Array) {
model.forEach((element: any, i: number) => {
this._convertModelToFormData(element, this._getFormDataKey(key, i), formData);
});
} else if (typeof model === 'object' && !(model instanceof File)) {
for (let propertyName in model) {
if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;
this._convertModelToFormData(model[propertyName], this._getFormDataKey(key, propertyName), formData);
}
} else {
formData.append(key, model);
}
return formData;
}
django를 사용하는 경우 ArrayField 예시와 같이 해야 합니다.
const form = new FormData();
const value = ["Hello", "World"];
const key = "arr";
let i;
for (i = 0; i < value.length; i++) {
form.append(key, value[i]);
}
axios.post(url, form).then(res=> console.log(res));
JavaScript 코드:
var formData = new FormData();
let arr = [1,2,3,4];
formData.append('arr', arr);
php에서의 출력:
$arr = $_POST['arr']; ===> '1,2,3,4'
솔루션 php 코드:
$arr = explode(",", $_POST['arr']); ===> [1,2,3,4]
요소 또는 오브젝트가 배열되어 있는 경우.set 메서드를 JSON.stringify와 함께 사용하면 배열을 문자열로 변환하고 값을 해당 문자열로 설정할 수 있습니다.tstring화된 json 데이터를 적절한 어레이 JSON으로 되돌려 폼 값을 설정하고 백엔드에서 문제가 거의 없는 유효한 어레이로 변환합니다.
const bookItems = [
{
name: "John Doe",
age: 21
}
...
];
formData.set("books", JSON.stringify(bookItems));
간단한 방법:
data.map(dt=>formdata.append("name",dt))
해봤어, 완벽하게 작동해
언급URL : https://stackoverflow.com/questions/16104078/appending-array-to-formdata-and-send-via-ajax
반응형
'programing' 카테고리의 다른 글
| jQuery에서 HTML 문서의 일부를 추출합니다. (0) | 2023.03.08 |
|---|---|
| 어떻게 Mongodb에서 마지막 N개의 레코드를 얻을 수 있지? (0) | 2023.03.08 |
| XmlHttpRequest on progress 간격 (0) | 2023.03.08 |
| js의 이상한 JSON 해석 동작 "예기치 않은 토큰:" (0) | 2023.03.08 |
| angularjs로 줄 바꿈 유지 (0) | 2023.03.08 |