Как отправить объекты FormData с Ajax-запросами в jQuery? [дубликат]
этот вопрос уже есть ответ здесь:
на XMLHttpRequest Уровень 2 стандарт (все еще рабочий проект) определяет FormData
интерфейс. Этот интерфейс позволяет добавлять File
объекты для XHR-запросов (запрос AJAX.)
кстати, это новая функция-в прошлом использовался "скрытый iframe-трюк" (читайте об этом в мой другой вопрос).
вот как это работает (пример):
var xhr = new XMLHttpRequest(),
fd = new FormData();
fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );
здесь input
это
10 ответов
Я верю, что вы могли бы сделать это так :
var fd = new FormData();
fd.append( 'file', input.files[0] );
$.ajax({
url: 'http://example.com/script.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
задание processData
в false позволяет предотвратить автоматическое преобразование данных jQuery в строку запроса. См.документы для получения дополнительной информации.
задание contentType
к false является обязательным, так как в противном случае jQuery это неправильно.
есть несколько еще не упомянутые методы, доступные для вас. Начните с установки свойства contentType в параметрах ajax.
здания на примере pradeek это:
$('form').submit(function (e) {
var data;
data = new FormData();
data.append('file', $('#file')[0].files[0]);
$.ajax({
url: 'http://hacheck.tel.fer.hr/xml.pl',
data: data,
processData: false,
type: 'POST',
// This will override the content type header,
// regardless of whether content is actually sent.
// Defaults to 'application/x-www-form-urlencoded'
contentType: 'multipart/form-data',
//Before 1.5.1 you had to do this:
beforeSend: function (x) {
if (x && x.overrideMimeType) {
x.overrideMimeType("multipart/form-data");
}
},
// Now you should be able to do this:
mimeType: 'multipart/form-data', //Property added in 1.5.1
success: function (data) {
alert(data);
}
});
e.preventDefault();
});
в некоторых случаях, когда принуждение jQuery ajax делать неожиданные вещи,beforeSend
событие-отличное место для этого. Некоторое время люди использовали beforeSend
чтобы переопределить тип mimeType до того, как он был добавлен в jQuery в 1.5.1. Вы должны иметь возможность изменять практически все на jqXHR объект в событии перед отправкой.
вы можете отправить объект FormData в запросе ajax, используя следующий код,
$("form#formElement").submit(function(){
var formData = new FormData($(this)[0]);
});
Это очень похоже на принятый ответ, но фактический ответ на тему вопроса. Это автоматически отправит элементы формы в FormData, и вам не нужно вручную добавлять данные в переменную FormData.
метод ajax выглядит следующим образом,
$("form#formElement").submit(function(){
var formData = new FormData($(this)[0]);
//append some non-form data also
formData.append('other_data',$("#someInputData").val());
$.ajax({
type: "POST",
url: postDataUrl,
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function(data, textStatus, jqXHR) {
//process data
},
error: function(data, textStatus, jqXHR) {
//process error msg
},
});
вы также можете вручную передать элемент формы внутри объекта FormData в качестве параметра такой
var formElem = $("#formId");
var formdata = new FormData(form[0]);
надеюсь, что это помогает. ;)
Вы можете использовать $.ajax beforeSend
событие для управления заголовком.
...
beforeSend: function(xhr) {
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
}
...
см. эту ссылку для получения дополнительной информации:http://msdn.microsoft.com/en-us/library/ms536752 (v=против 85).aspx
Я думаю, вы не можете сделать это в ajax для поддержки всех браузеров, я мог бы сказать хорошо, чтобы проверить этот плагин AJAX uploader, чтобы увидеть, как они это сделали http://valums.com/ajax-upload/
Я делаю это так, и это работа для меня, я надеюсь, что это поможет:)
<div id="data">
<form>
<input type="file" name="userfile" id="userfile" size="20" />
<br /><br />
<input type="button" id="upload" value="upload" />
</form>
</div>
<script>
$(document).ready(function(){
$('#upload').click(function(){
console.log('upload button clicked!')
var fd = new FormData();
fd.append( 'userfile', $('#userfile')[0].files[0]);
$.ajax({
url: 'upload/do_upload',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
console.log('upload success!')
$('#data').empty();
$('#data').append(data);
}
});
});
});
</script>
Если вы хотите отправить файлы с помощью ajax, используйте " jquery.форма.Яш" Это легко передает все элементы формы.
образцы http://jquery.malsup.com/form/#ajaxSubmit
грубый вид :
<form id='AddPhotoForm' method='post' action='../photo/admin_save_photo.php' enctype='multipart/form-data'>
<script type="text/javascript">
function showResponseAfterAddPhoto(responseText, statusText)
{
information= responseText;
callAjaxtolist();
$("#AddPhotoForm").resetForm();
$("#photo_msg").html('<div class="album_msg">Photo uploaded Successfully...</div>');
};
$(document).ready(function(){
$('.add_new_photo_div').live('click',function(){
var options = {success:showResponseAfterAddPhoto};
$("#AddPhotoForm").ajaxSubmit(options);
});
});
</script>
JavaScript:
function submitForm() {
var data1 = new FormData($('input[name^="file"]'));
$.each($('input[name^="file"]')[0].files, function(i, file) {
data1.append(i, file);
});
$.ajax({
url: "<?php echo base_url() ?>employee/dashboard2/test2",
type: "POST",
data: data1,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function(data) {
console.log("PHP Output:");
console.log( data );
});
return false;
}
PHP:
public function upload_file(){
foreach ($_FILES as $key ) {
$name =time().$key['name'];
$path='upload/'.$name;
@move_uploaded_file($key['tmp_name'],$path);
}
вместо - fd.append( 'userfile', $('#userfile')[0].files[0]);
использовать - fd.append( 'file', $('#userfile')[0].files[0]);
лучшая документация и пример, который я нашел, были здесь https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects