javascript - 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")
});

当我对 $_POST 和 $_FILES 数组进行 var_dump() 时，它显示两个数组都是空的。尽管 Chrome Dev 阅读中有“Request Payload”

Content-Disposition: form-data; name="frame"; filename="GoldFrame.jpg"

Content-Type: image/jpeg

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

无论哪种方式，有人可以给我一个问题的答案吗？或者至少指向可能有我的答案的资源？似乎有很多类似的问题，但我还没有看到一个有可靠答案的问题。

我过去曾将 iframe 用于此类任务，但这似乎是一种非常 hacky 的方法，我希望将来能够灵活地使用 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,
        processData: false,
        success: function(data){
            console.log(data);
        }           
    });
}));

服务器端 (handler.php)

<?php 

var_dump($_FILES);