Итак, у меня есть форма, и я отправляю ее через ajax, используя функцию сериализации jquery.
serialized = $(Forms).serialize();
$.ajax({
type : "POST",
cache : false,
url : "blah",
data : serialized,
success: function(data) {
}
Но что если в форме есть поле <input type="file">.... Как мне передать файл в форму, используя этот метод сериализации ajax... Печать $_FILES ничего не выводит.
Ответ 1
Используйте объект FormData. Он работает для любого типа формы:
$(document).on("submit", "form", function(event) {
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status) {
},
error: function (xhr, desc, err) {
}
});
});
Ответ 2
Файл не может быть загружен с помощью AJAX, потому что нельзя получить доступ к содержимому файла, хранящегося на компьютере клиента, и отправить его в запросе с помощью javascript. Один из методов достижения этой цели — использование скрытых iframe. Есть хороший плагин jquery form, который позволяет вам AJAXify ваши формы, и он также поддерживает загрузку файлов. Поэтому при использовании этого плагина ваш код будет выглядеть следующим образом:
$(function() {
$('#ifoftheform').ajaxForm(function(result) {
alert('Форма была успешно обработана');
});
});
Плагин автоматически позаботится о подписке на событие, submit формы, отмене отправки по умолчанию, сериализации значений, использовании правильного метода, обработке полей загрузки файлов и т. д.
Ответ 3
HTML
<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
<input id="name" name="name" placeholder="Enter Name" type="text" value="">
<textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
<select name="gender" id="gender">
<option value="male" selected="selected">Male</option>
<option value="female">Female</option>
</select>
<input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>
JavaScript
var data = new FormData();
// Данные формы
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
data.append(input.name, input.value);
});
// Данные файла
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
// Данные клиента
data.append('key', 'value');
$.ajax({
url: "URL",
method: "post",
processData: false,
contentType: false,
data: data,
success: function (data) {
// успешное выполнение
},
error: function (e) {
// ошибка
}
});
PHP
<?php
echo '<pre>';
print_r($_POST);
print_r($_FILES);
echo '</pre>';
die();
?>
Ответ 4
$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
type: "POST",
data: formData,
dataType: "json",
url: form.attr('action'),
processData: false,
contentType: false,
success: function(data) {
alert('Success! Form data posted with file type of input also!');
}
)};});
Используя new FormData() и установив processData: false, contentType:false в ajax вызове, я смог отправить форму с файловым вводом. Используя приведенный выше код, я могу отправить данные формы с файловым полем также через Ajax.
Ответ 5
Я думаю, что есть гораздо более эффективный способ сделать это специально для тех, кто хочет ориентироваться на все браузеры, а не только на браузеры с поддержкой FormData. Идея в том, чтобы иметь скрытый IFRAME на странице и сделать обычный submit для примера From внутри IFrame.
<FORM action='save_upload.php' method=post
enctype='multipart/form-data' target=hidden_upload>
<DIV><input
type=file name='upload_scn' class="file_upload"></DIV>
<INPUT
type=submit name=submit value=Upload /> <IFRAME id=hidden_upload
name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'
style='width:0;height:0;border:0px solid #fff'></IFRAME>
</FORM>
Самое главное — сделать целью формы скрытый iframe идентификатор или имя и enctype multipart/form-data, чтобы разрешить прием, например, фотографий:
javascript
function getFrameByName(name) {
for (var i = 0; i < frames.length; i++)
if (frames[i].name == name)
return frames[i];
return null;
}
function uploadDone(name) {
var frame = getFrameByName(name);
if (frame) {
ret = frame.document.getElementsByTagName("body")[0].innerHTML;
if (ret.length) {
var json = JSON.parse(ret);
// делайте, что хотите
}
}
}
PHP
<?php
$target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);
if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
$result = ....
}
echo json_encode($result);
?>
Ответ 6
Вы можете загружать файлы через AJAX с помощью метода FormData. Хотя IE7, 8 и 9 не поддерживают функцию FormData.
$.ajax({
url: "ajax.php",
type: "POST",
data: new FormData('form'),
contentType: false,
cache: false,
processData:false,
success: function(data) {
$("#response").html(data);
}
});
Web
