AJAX文件上传后，$ _ POST和$ _FILES为空 [英] $_POST and $_FILES empty after AJAX file upload

问题描述

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

I am new to web development, and the latest problem I have been having is ajax file uploading...

现在我有两个HTML输入字段；文件输入和按钮.

Right now I have two HTML input fields; a file input and a button.

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

单击按钮后，我然后调用具有以下代码的函数.

After the button is clicked I then call a function that has the following code..

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开发人员阅读了请求有效载荷"

When I var_dump() the $_POST and $_FILES array it shows both arrays as empty. This is despite the "Request Payload" in Chrome Dev reading

Content-Disposition:表单数据； name ="frame"; filename ="GoldFrame.jpg"

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

内容类型:图片/jpeg

Content-Type: image/jpeg

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

In which I am under the impression that this means the information of the file that I select on the front end is being successfully "post"ed to my handler.php file. Is this a wrong interpretation?

无论哪种方式，有人可以给我一个解决我问题的答案吗?或至少指向可能有我答案的资源?同样的问题似乎也有很多类似的问题，但是我还没有看到一个有确凿答案的问题.

Either way, could someone please give me an answer to my problem? Or atleast point to a resource that might have my answer? There seem to be many similar questions along the same lines, but I haven't seen one that has a solid answer.

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

I have used iframes for this kind of thing in the past, but that seems like a really hacky method, and I would like to have the flexibility to use ajax for this kind of task in the future.

感谢您的帮助.

推荐答案

尝试一下.

Try this.

表格(index.html)

Form (index.html)

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

脚本(script.js)

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

服务器端(handler.php)

Server Side (handler.php)

<?php 

var_dump($_FILES);

这篇关于AJAX文件上传后，$ _ POST和$ _FILES为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！