У меня возникла проблема с отправкой файла на серверный PHP-скрипт с помощью jQuery'ajax-функции.
Можно получить список файлов с помощью $('#fileinput').attr('files')
, но как можно отправить эти данные на сервер? Результирующий массив ($_POST
) на стороне сервера php-скрипта равен 0 (NULL
) при использовании file-input.
Я знаю, что это возможно (хотя до сих пор не нашел ни одного решения на jQuery, только код Prototye (http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html)).
Похоже, это относительно новое решение, поэтому, пожалуйста, не упоминайте, что загрузка файла невозможна через XHR/Ajax, потому что это'точно работает.
Мне нужна функциональность в Safari 5, FF и Chrome были бы хороши, но не обязательны.
Мой код на данный момент таков:
$.ajax({
url: 'php/upload.php',
data: $('#file').attr('files'),
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
Начиная с Safari 5/Firefox 4, проще всего использовать класс FormData
:
var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
Итак, теперь у вас есть объект FormData
, готовый к отправке вместе с XMLHttpRequest.
jQuery.ajax({
url: 'php/upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
});
Очень важно, чтобы вы установили опцию contentType
в false
, заставляя jQuery не добавлять за вас заголовок Content-Type
, иначе в нем будет отсутствовать граничная строка.
Также необходимо оставить флаг processData
установленным в false, иначе jQuery попытается преобразовать ваши FormData
в строку, что приведет к неудаче.
Теперь вы можете получить файл в PHP, используя:
$_FILES['file-0']
(Существует только один файл, file-0
, если вы не указали атрибут multiple
для ввода файла, в этом случае числа будут увеличиваться с каждым файлом).
Использование эмуляции FormData для старых браузеров.
var opts = {
url: 'php/upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
};
if(data.fake) {
// Make sure no text encoding stuff is done by xhr
opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
opts.contentType = "multipart/form-data; boundary="+data.boundary;
opts.data = data.toString();
}
jQuery.ajax(opts);
Создание FormData из существующей формы
Вместо того чтобы вручную итерировать файлы, объект FormData можно также создать из содержимого существующего объекта формы:
var data = new FormData(jQuery('form')[0]);
Используйте собственный массив PHP вместо счетчика
Просто назовите элементы вашего файла одинаково и заключите имя в скобки:
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file[]', file);
});
Тогда $_FILES['file']
будет массивом, содержащим поля загрузки файла для каждого загруженного файла. Я рекомендую использовать этот вариант вместо моего первоначального решения, так как он проще для итераций.
Просто хотел добавить немного к замечательному ответу Рафаэля. Вот'как заставить PHP выдавать одинаковые $_FILES
, независимо от того, используете ли вы JavaScript для отправки.
HTML форма:
<form enctype="multipart/form-data" action="/test.php"
method="post" class="putImages">
<input name="media[]" type="file" multiple/>
<input class="button" type="submit" alt="Upload" value="Upload" />
</form>
PHP выдает этот $_FILES
, когда отправляется без JavaScript:
Array
(
[media] => Array
(
[name] => Array
(
[0] => Galata_Tower.jpg
[1] => 518f.jpg
)
[type] => Array
(
[0] => image/jpeg
[1] => image/jpeg
)
[tmp_name] => Array
(
[0] => /tmp/phpIQaOYo
[1] => /tmp/phpJQaOYo
)
[error] => Array
(
[0] => 0
[1] => 0
)
[size] => Array
(
[0] => 258004
[1] => 127884
)
)
)
Если вы делаете прогрессивное улучшение, используя Raphael's JS для отправки файлов...
var data = new FormData($('input[name^="media"]'));
jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
data.append(i, file);
});
$.ajax({
type: ppiFormMethod,
data: data,
url: ppiFormActionURL,
cache: false,
contentType: false,
processData: false,
success: function(data){
alert(data);
}
});
... вот как выглядит массив PHP'$_FILES
после использования этого JavaScript для отправки:
Array
(
[0] => Array
(
[name] => Galata_Tower.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpAQaOYo
[error] => 0
[size] => 258004
)
[1] => Array
(
[name] => 518f.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpBQaOYo
[error] => 0
[size] => 127884
)
)
Это хороший массив, и на самом деле это то, во что некоторые люди превращают $_FILES
, но я считаю, что полезно работать с одним и тем же $_FILES
, независимо от того, использовался ли JavaScript для отправки. Итак, вот некоторые незначительные изменения в JS:
// match anything not a [ or ]
regexp = /^[^[\]]+/;
var fileInput = $('.putImages input[type="file"]');
var fileInputName = regexp.exec( fileInput.attr('name') );
// make files available
var data = new FormData();
jQuery.each($(fileInput)[0].files, function(i, file) {
data.append(fileInputName+'['+i+']', file);
});
(правка от 14 апреля 2017 года: я удалил элемент формы из конструктора FormData() - это исправило этот код в Safari).
Этот код делает две вещи.
input
, делая HTML более удобным для обслуживания. Теперь, пока form
имеет класс putImages, все остальное происходит автоматически. То есть у input
не должно быть никакого специального имени.Благодаря этим изменениям, при отправке с помощью JavaScript теперь получается точно такой же массив $_FILES
, как и при отправке с помощью обычного HTML.
Посмотрите на мой код, это делает работу для меня
$( '#formId' )
.submit( function( e ) {
$.ajax( {
url: 'FormSubmitUrl',
type: 'POST',
data: new FormData( this ),
processData: false,
contentType: false
} );
e.preventDefault();
} );
Я только что создал эту функцию, основываясь на некоторой информации, которую я прочитал.
Используйте ее как .serialize()
, вместо этого просто поставьте .serializefiles();
.
Работает здесь в моих тестах.
//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
var obj = $(this);
/* ADD FILE TO PARAM AJAX */
var formData = new FormData();
$.each($(obj).find("input[type='file']"), function(i, tag) {
$.each($(tag)[0].files, function(i, file) {
formData.append(tag.name, file);
});
});
var params = $(obj).serializeArray();
$.each(params, function (i, val) {
formData.append(val.name, val.value);
});
return formData;
};
})(jQuery);
Если форма определяется в HTML, то легче передать форму в конструкторе, чем перебирать и добавлять изображения.
$('#my-form').submit( function(e) {
e.preventDefault();
var data = new FormData(this); // <-- 'this' is your form element
$.ajax({
url: '/my_URL/',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
...
Девин Венейбл'ы ответ был близок к тому, что я хотел, но я хотел, что бы работать на нескольких формах, и использовать меры, которые уже указаны в форме, так что каждый файл будет идти в нужное место.
Я также хотел бы использовать jQuery's на() метод, поэтому я могу избежать, используя .готов().
Что меня на это: (заменить formSelector с вашим селектор jQuery)
$(document).on('submit', formSelecter, function( e ) {
e.preventDefault();
$.ajax( {
url: $(this).attr('action'),
type: 'POST',
data: new FormData( this ),
processData: false,
contentType: false
}).done(function( data ) {
//do stuff with the data you got back.
});
});
Класс виде FormData не получилось, однако в iOS в Safari (на iPhone, по крайней мере) я не'т возможность использовать Рафаэля Швейкерт'ы решение как есть.
Mozilla для разработчиков имеет хороший страницы на манипулирование объектами виде FormData.
Так что добавить пустую форму где-то на Вашей странице, указав enctype:
<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>
Затем создайте объект FormData как:
var data = new FormData($("#fileinfo"));
и поступают, как и в Рафаэль's код.
Один из подвохов я столкнулся сегодня, я думаю, стоит отметить, связанных с этой проблемой: если URL для AJAX-вызов будет перенаправлен, то заголовок типа контента: 'multipart/данные формы' могут быть потеряны.
Я, например, разместив на http://server.com/context?param=x
В разделе Сеть хром я увидел правильный заголовок составные для этого запроса, но тогда редирект 302 на http://server.com/context/?param=x (обратите внимание на тире после контекста)
При перенаправлении заголовок составного был потерян. Обеспечить запросы не перенаправляются, Если эти решения не работают для вас.
Все вышеуказанные решения выглядит хорошо и элегантно, но в виде FormData() объект не ожидает какого-либо параметра, но и использовать функции append (), после создания он, как и что писал выше:
виде FormData.добавить(знач.имя, Вэл.значение);
В настоящее время вы не'т даже необходим jQuery:) таблице поддержка API
let result = fetch('url', {method: 'POST', body: new FormData(document.querySelector("#form"))})
Если входной файл " имя " указывает на массив и флаги несколько
, и вы разбираете составляют С
виде FormData, не надо итерационно
добавить () входных файлов. Виде FormData
будет автоматически обрабатывать несколько файлов.
в
$('#submit_1').on('click', function() {
let data = new FormData($("#my_form")[0]);
$.ajax({
url: '/path/to/php_file',
type: 'POST',
data: data,
processData: false,
contentType: false,
success: function(r) {
console.log('success', r);
},
error: function(r) {
console.log('error', r);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form">
<input type="file" name="multi_img_file[]" id="multi_img_file" accept=".gif,.jpg,.jpeg,.png,.svg" multiple="multiple" />
<button type="button" name="submit_1" id="submit_1">Not type='submit'</button>
</form>
в
Обратите внимание, что кнопка обычная тип="и кнопка" и, а не
тип=на"Отправить"` в. Это показывает, что нет зависимости, используя "отправить", чтобы получить эту функциональность.
Запись в результате $_FILES больше
, как это в инструменты разработчика Chrome:
multi_img_file:
error: (2) [0, 0]
name: (2) ["pic1.jpg", "pic2.jpg"]
size: (2) [1978036, 2446180]
tmp_name: (2) ["/tmp/phphnrdPz", "/tmp/phpBrGSZN"]
type: (2) ["image/jpeg", "image/jpeg"]
Примечание: бывают случаи, когда некоторые картинки буду загружать просто отлично после загрузки как один файл, но при загрузке в набор из нескольких файлов. Симптомом является то, что PHP отчеты пустые $_POST, где
и `$_FILES больше без Аякса бросать любые ошибки. Проблема возникает с хром 75.0.3770.100 и PHP 7.0. Только, кажется, случается с 1 из нескольких десятков снимков в моем наборе тестов.
Старые версии IE не поддерживают виде FormData ( полный список поддерживаемых браузеров для FormData-это здесь: https://developer.mozilla.org/en-US/docs/Web/API/FormData).
Либо вы можете использовать jQuery плагин (например, http://malsup.com/jquery/form/#code-samples ) или, вы можете использовать iframe решение публиковать многотомные данные формы через AJAX: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript