使用AJAX&上传文件PHP - $ _FILES数组为空

时间:2017-04-04 06:58:26

标签: javascript php jquery ajax

我已经阅读了近20个不同的论坛帖/ stackoverflow问题/答案,但我无法完成这项工作。我已经和jQuery / PHP合作了大约5年了,但这是我第一次需要用AJAX做这样的事情。

所以...现在,我只是测试并尝试上传.txt文件并尝试使用file_get_contents()获取其内容并将其发送回我的JS代码。

我已经删除了所有花哨的工作人员并尽可能地简化了我的文件,所以这是我的HTML文件:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <form id="uploadForm" action="url/to/php/script">
                <input type="file" name="frame" />
                <input type="submit" value="UPLOAD" />
            </form>
        </div>
    </div>
</div>

和我的JS

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

在我的PHP脚本中,我有var_dump($_FILES),这给了我空数组。

我的JS&amp;表单是从stackoverflow的一个答案中复制的。网址:$_POST and $_FILES empty after AJAX file upload - 因为它标记为有效,但对我来说......仍然是空的。

通常我的表单有enctype="multipart/form-data"method="post",但没有区别。

我的jQuery lib:http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

我来到这里是因为我觉得我不能尝试更多的事情,无论我做什么,$_FILES数组都是空的。

2 个答案:

答案 0 :(得分:2)

你的AJAX逻辑很好。问题是因为您使用了非常 非常 过时的jQuery版本,并且在多年的开发过程中对AJAX逻辑进行了许多调整 - 尤其是因为支持FormData并通过AJAX发送二进制数据。

你应该将jQuery升级到至少1.12,理想情况下3.2如果你不需要传统的IE支持。

答案 1 :(得分:0)

use new version jquery library like this, your ajax code looks good so for this requirement need to update your jquery library . you use old library in that case it is not working 

http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

更多信息

https://code.jquery.com/jquery/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
    url: "url/to/php/script",
    type: "POST",
    data:  new FormData(this),
    contentType: false,
    cache: false,
    processData: false,
    success: function(data){
        console.log(data);
    }           
});
}));
</script>