Почему массив $_FILES пуст?

Question

[Владимир]

Заранее прошу прощения, что вопрос получился длинным и много кода.
Суть в следующем: пытаюсь загрузить картинку на сервер из формы через ajax.
Код формы:

<img id="preview" class="img-fluid left-logo" src="" />
<form id="upload-image" enctype="multipart/form-data">
    <input type="file" name="image" id="image">
    <input type="submit" value="Сохранить изменения">
</form>

Как видите, проще не бывает...
Input type="file" обрабатывается JavaScript'ом:

$(document).ready(function () {
        $('#image').change(function(){
                readImage(this);
        });
        function readImage ( input ) {
                if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                                $('#preview').attr('src', e.target.result);                        }
                        reader.readAsDataURL(input.files[0]);                }
        }
        $('#upload-image').on('submit',(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                        type:'POST',
                        url: './modules/image-update-handler.php',
                        data: formData,
                        cache:false,
                        contentType: false,
                        processData: false,
                        success:function(data){console.log('success');},
                        error:function(data){console.log('error');}
                });
        }));
});

Все происходит замечательно: картинка грузится в элемент с id="preview", ajax выполняется, в консоли - success.
Но в обработчик image-update-handler.php приходит пустой массив $_POST, да и $_FILES тоже пуст.
В функции readImage проверял через консоль переменную reader: она содержит объект fileReader, а его атрибут result содержит данные - data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIA (и еще 28 972 символа).
Главный вопрос: как получить в обработчике данные файла из формы?

Comments

[happyer]

у меня тоже такое недавно было
я выводил чрез var_dump($_POST) там было какое-то значение допустим x=>1
а когда хотел вывести $_POST["x"] у меня ничего не выводилось

[Lander]

Попробуйте так
https://stackoverflow.com/questions/6974684/how-to...

[happyer]

я просто подождал и на следующий день болезнь прошла

[Ярослав Иванов]

Аякс не умеет работать с файлами. Надо через нативный js расширять его функционал.

[Владимир]

Lander, не получается. input.files[0] вне контекста функции $('#upload-image').

[Владимир]

Ярослав Иванов, большая просьба: читайте документацию. Ajax отлично работает с файлами и тому миллион примеров можно найти в инете. В частности, идея представленного мной кода не оригинальна, а взята из работающего проекта.

[Ярослав Иванов]

Владимир, большая просьба смотрет код не через перевернутую лупу. Ajax из коробки не работает с файлами.

[Дмитрий Добрышин]

Ярослав Иванов, скажите, как же тогда нетив аякс у меня выполняет данный код?

function getHTTPObject() {
  var xmlhttp;
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest(); 
      if (xmlhttp.overrideMimeType) {
        xmlhttp.overrideMimeType("text/plain"); 
      }
    } catch(e) {
      xmlhttp = false; 
    }
  }
  return xmlhttp;
}
      var ajaxFile = getHTTPObject();
      ajaxFile.open("POST", "/file", true);
      var fileData = new FormData();
      fileData.append("file", getByName("open-file").files[0]);
      ajaxFile.send(fileData);

Автор же вообще пользуется JQuery, где вообще это упрощено до невозможности.

[Ярослав Иванов]

Дмитрий Добрышин, вы читать не умеете?

[Дмитрий Добрышин]

Ярослав Иванов, что именно?
XMLhttpRequest() - стандартный объект
FormData() - так же стандартный объект
document.getElementByName() - стандартный объект
Ааа! Наверно, XMLHttpRequest().send() или input.files[0] - это ваше пресловутое расширение через нетив.

Не смешите :-)

[Ярослав Иванов]

Дмитрий Добрышин, вы реально странный и не умеете читать. Не отвечайте мне.

[Владимир]

Коллеги, всем большое спасибо за дискуссию. Спор о том, работает ли ajax с файлами не имеет смысла. А понятие AJAX из коробки" вообще для меня новое. AJAX просто Asynchronous Javascript and XML, т.е. средство для асинхронной работы JS и XML. JavaScript работает с файлами? XML же вообще язык разметки ФАЙЛОВ.
А что касается предствленного кода, то он полностью рабочий, ошибка была в адресе обработчика, указанного в параметре url запроса ajax.

[Ярослав Иванов]

Владимир, под ajax'ом я подразумеваю метод jquery. Под каробкой я подразумеваю вызов лишь одного метода ajax без создания экземпляром формы и прочего. Но почему-то люди в упор этого не видят.

Answer 1

[ThunderCat]

$('#upload-image').on('submit',(function(e) {
                e.preventDefault();
                var formData = new FormData();
                formData.append('image',$('#image')[0].files[0]); 
                $.ajax({
                        type:'POST',
                        url: './modules/image-update-handler.php',
                        data: formData,
                        cache:false,
                        contentType: false,
                        processData: false,
                        success:function(data){console.log('success');},
                        error:function(data){console.log('error');}
                });
        }));

Comments

[Павел Корнилов]

А почему не
var formData = new FormData(this);
?
https://developer.mozilla.org/ru/docs/Web/API/Form...

[ThunderCat]

Павел Корнилов, шоб не тащить инпут лишний.