$ _POST и $ _FILES пустой после загрузки AJAX файла

Question

Я новичок в веб-разработки, и последняя проблема, которую я был с раздаёт Аякса файл ...

Сейчас у меня есть два поля ввода HTML; ввод файла и кнопка.

<input type="file" name="Frame" id="Frame_"/> 
 
<input type="button" name="FrameButton" id="FrameButton_" value="UPLOAD"/>

После нажатия кнопки затем вызвать функцию, которая имеет следующий код ..

var frame = document.getElementById('Frame_'); 
 
var frameImg = frame.files[0]; 
 
var form_data = new FormData(); 
 

 
form_data.append('frame', frameImg); 
 

 
jQuery.ajax({ 
 
    url : './handler.php', 
 
    type : 'post', 
 
    data : form_data 
 
    contentType : false, 
 
    processData : false, 
 
    success : alert("Frame Uploaded") 
 
});

Когда я var_dump() для $ _POST и $ _FILES, он показывает оба массива как пустые. Это несмотря на «полезную нагрузку запроса» в показаниях Chrome Dev

Content-Disposition: form-data; Name = "кадр"; имя файла = «GoldFrame.jpg»

Content-Type: изображение/JPEG

В котором я нахожусь под впечатлением, что это означает, что информация о файле, который я выбираю на переднем конце успешно " post "ed в файл handler.php. Это неправильная интерпретация?

В любом случае, может кто-нибудь, пожалуйста, дать мне ответ на мою проблему? Или, по крайней мере, укажите ресурс, который может иметь мой ответ? Кажется, что есть много похожих вопросов по тем же направлениям, но я не видел одного, у которого есть твердый ответ.

Я использовал iframe для такого рода вещей в прошлом, но это похоже на действительно взломанный метод, и я хотел бы иметь гибкость в использовании ajax для такого рода задач в будущем.

Справка приветствуется.

Answer 1

Попробуйте это.

Форма (index.html)

<form id="uploadForm"> 
    <input type="file" name="frame" /> 
    <input type="submit" value="UPLOAD" /> 
</form> 

Script (script.js)

$("#uploadForm").on('submit',(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: "handler.php", 
     type: "POST", 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(data){ 
      console.log(data); 
     }   
    }); 
})); 

Server Side (обработчик.php)

<?php 

var_dump($_FILES); 

Answer 2

Вы var_dump() - ваши массивы $ _FILES/$ _ POST в файле handler.php?

Если вы пытаетесь сбрасывать эти переменные в файле с вызовом ajax, это не сработает, потому что AJAX выполняет внешний интерфейс, а файлы/столбцы - это переменные на стороне сервера ... которые означает, что только файлы handler.php будут иметь эти переменные.

Попробуйте добавить вызов var_dump() в handler.php и вывести результат, который приведет к вызову ajax, и я надеюсь, что вы увидите результаты, которые вы ищете.