Przesyłanie danych i plików w jednej formie za pomocą Ajax?
Używam jQuery i Ajax dla moich formularzy do przesyłania danych i plików, ale nie jestem pewien, jak wysłać zarówno dane, jak i pliki w jednej formie?
Obecnie robię prawie to samo z obydwoma metodami, ale sposób, w jaki dane są gromadzone w tablicy, jest inny, dane używają.serialize();
ale pliki używają= new FormData($(this)[0]);
Czy możliwe jest połączenie obu metod, aby móc przesyłać pliki i dane w jednej formie przez Ajax?
Dane jQuery, Ajax i html
$("form#data").submit(function(){
var formData = $(this).serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="data" method="post">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<button>Submit</button>
</form>
Pliki jQuery, Ajax i html
$("form#files").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="files" method="post" enctype="multipart/form-data">
<input name="image" type="file" />
<button>Submit</button>
</form>
Jak mogę połączyć powyższe, aby móc wysyłać dane i pliki w jednej formie przez Ajax?
Moim celem jest móc wysłać cały ten formularz w jednym poście z Ajaxem, czy to możliwe?
<form id="datafiles" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>