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 함수를 사용하여 PHP 파일로 보내 SQL DB에 저장합니다.
$.ajax({
type: "post",
url: 'php/submittionform.php',
cache: false,
processData: false,
contentType: false,
data: data,
success: function(request) {$('#box').html(request); }
})
그러나 PHP 측에서는 arr
배열 인 변수가 문자열로 나타납니다.
Form 데이터로 ajax를 사용하지 않고 간단한 $.POST
옵션을 사용 하면 PHP 측에서 배열로 가져 오지만 파일도 보낼 수 없습니다.
어떤 해결책?
답변
몇 가지 옵션이 있습니다.
JSON 문자열로 변환 한 다음 PHP에서 구문 분석 (권장)
JS
var json_arr = JSON.stringify(arr);
PHP
$arr = json_decode($_POST['arr']);
또는 @Curios의 방법을 사용하십시오.
비아 어레이를 전송 FormData
.
권장하지 않음 : 데이터를 직렬화 한 다음 PHP에서 역 직렬화
JS
// Use <#> or any other delimiter you want
var serial_arr = arr.join("<#>");
PHP
$arr = explode("<#>", $_POST['arr']);
답변
FormData
다음과 같은 방법으로 배열을 보낼 수도 있습니다 .
var formData = new FormData;
var arr = ['this', 'is', 'an', 'array'];
for (var i = 0; i < arr.length; i++) {
formData.append('arr[]', arr[i]);
}
따라서 arr[]
간단한 HTML 양식을 사용하는 것과 동일한 방식으로 작성할 수 있습니다 . PHP의 경우 작동합니다.
이 기사가 유용 할 것입니다. 쿼리 문자열 내에서 배열을 전달하는 방법?
답변
이것은 오래된 질문이지만 최근에 파일과 함께 객체를 게시하는 데이 문제가 발생했습니다. 객체와 배열 인 자식 속성을 사용하여 객체를 게시 할 수 있어야했습니다.
아래 함수는 개체를 살펴보고 올바른 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
답변
Typescript 버전 :
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에 모든 유형 입력 추가
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]) ;
}
답변
중첩 된 개체와 배열이있는 경우 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);
}
}
답변
다음 버전은 간단한 값을 포함하는 모델에 유효합니다.
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;
}