Использование ‘this’ с formData для публикации только из текущей формы

Question

Использование ‘this’ с formData для публикации только из текущей формы

У меня есть форма загрузки файла:

<form class="uploadFile" name="uploadFile" method="post" action="process/uploadBuildImages.php" enctype="multipart/form-data">
<div class="uploadImageButton">Upload Image</div>
<input type="file" id="fileUpload" class="fileUpload" name="picture">
</form>

Я публикую эту форму через ajax и formData следующим образом:

var form = $('.uploadFile')[0];
var formData = new FormData(form);

Проблема в том, что у меня одна и та же форма выводится до 4 раз на одной странице. Я делаю CMS с сообщениями в блоге, и форма загрузки изображения есть в каждом из сообщений в блоге.

Как я могу настроить таргетинг и публиковать сообщения только из текущей формы? Я знаю, что это похоже на использование ‘this.form и т. Д., Но я всегда борюсь с .next / closest и т. Д. Скоро мы рассмотрим это подробнее.

Если у меня есть только один экземпляр этой формы на странице, то он работает нормально, но в противном случае я получаю сообщение об отсутствии выбранного файла.

Спасибо!

Для справки, полный JS:

$(document).ready(function(){
$('.uploadFile').submit(function(){
var form = $('.uploadFile')[0];
var formData = new FormData(form);
$.ajax({
type: "POST",
url: "process/uploadBuildImages.php",
data: formData,
dataType: "json",
contentType: false,
processData: false,
success: function(response){
// actions
}

}
});
}):

И на странице есть как минимум 4 из тех же структур div, которые имеют тот же формат, что и:

<div class="blogtest" id="'.$postID.'">
<div class="text">
<div class="postoverlay"></div>
<div class="buildtext" id="'.$postTextID.'">'.$convertedtext.'</div>
<form class="uploadFile" name="uploadFile" style="display:$showUploadForm;" method="post" action="process/uploadBuildImages.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
<div class="uploadImageButton">Upload Image</div>
<input type="file" id="fileUpload" class="fileUpload" name="picture">
</form>
<form class="updatepost" id="'.$postContentID.'" method="post">
<div class="editor">
<textarea name="muffin" id="'.$ckEID.'" class="ckeditor">'.$textFiltered.'</textarea>
</div>
</form>
</div>
</div>

0

ajax forms jquery multipartform-data php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Повторяя тот же диагноз, который я поставил в моих комментариях, вам не хватает контекста в вызове функции — ваш код в основном передает данные формы во все формы вместе с классом .uploadFile независимо от того, какой из них представлен:

var form = $('.uploadFile')[0]; // Problematic line

Вы должны использовать $(this) чтобы дать ему контекст при срабатывании контекста отправки, так что вы отправляете данные формы только из формы, из которой произошло событие, а не все формы вместе с классом. Поэтому вы заменяете:

var form = $('uploadFile')[0];

с:

// Alternative 1
var form = $(this)[0];

// Alternative 2
var form = this;

Другими словами:

$(document).ready(function(){
$('.uploadFile').submit(function(){
var form = this; // Fixed line
var formData = new FormData(form);
$.ajax({
type: "POST",
url: "process/uploadBuildImages.php",
data: formData,
dataType: "json",
contentType: false,
processData: false,
success: function(response){
// actions
}
}
});
});

Вы можете узнать больше, что $(this) делает в JQuery Вот а также Вот.

0