AJAX文件上传后，$ _ POST和$ _FILES为空

Question

我是Web开发的新手，而我遇到的最新问题是ajax文件上传...

现在，我有两个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开发人员阅读了“请求有效载荷”

内容处置：表单数据；name =“ frame”; filename =“ GoldFrame.jpg”

内容类型：图片/ jpeg

我的印象是，这意味着我在前端选择的文件信息已成功“发布”到我的handler.php文件中。这是错误的解释吗？

不管哪种方式，有人可以给我答案我的问题吗？或至少指向可能有我答案的资源？同样的问题似乎也有很多类似的问题，但我还没有看到一个有确凿答案的问题。

过去，我曾将iframe用于此类操作，但这似乎是一种非常棘手的方法，并且我希望将来能够灵活地将Ajax用于此类任务。

感谢帮助。

Answer 1

尝试这个。

表格（index.html）

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

脚本（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);
        }           
    });
}));

服务器端（handler.php）

<?php 

var_dump($_FILES);