通过 AJAX 发送文件返回“blob”错误答案

【问题标题】：Sending file through AJAX returns 'blob' error通过 AJAX 发送文件返回“blob”错误
【发布时间】：2015-05-26 16:12:11
【问题描述】：

我正在尝试让 AJAX 请求向我的控制器发送一个文件，然后控制器应该继续读出发送的文件并将排序后的数组返回给前端，尽管它不像我那样工作' m 卡在“blob”未设置错误上。我已经搜索过但并没有真正找到我正在寻找的答案，因此我创建了这个问题。

目前我收到以下类型错误：

'slice' called on an object that does not implement interface Blob.

我要发送的数据如下：

http://piclair.com/qk8ms（图片因为我无法直接从浏览器复制数据。）

javascript：

// Click handler for file read
$(document).on('click','#load-csv-btn',function(e){
    e.preventDefault();
    var file = $('#file_upload')[0].files;
    console.log(file);

    readCSV(file);
});


function readCSV(file){
    $.ajax({
        type: "POST",
        url: "ajax/read.php",
        data: {file: file},
        contentType: false
    }).success(function(data){
        console.log(data);
    }).fail(function(){
        console.log('error');
    });
}

PHP 处理程序，虽然我猜这部分与这个问题无关：

<?php
    var_dump($_POST);

我发现有人说设置 processData: false 和 contentType: false 会让脚本忽略 blob 要求，但如果我设置这些参数，我的服务器只会发回一个空数组，我想这并不奇怪，因为我'不处理任何数据。

所以我希望有人知道这个问题的解决方案并能够帮助我。

编辑：

为了弄清楚我尝试过哪种方法返回一个空数组，这里是替代代码：

$(document).on('click','#load-csv-btn',function(e){
    e.preventDefault();
    var file = $('#file_upload')[0].files[0];
    var fd = new FormData();
    fd.append("csv",file);

    readCSV(fd);
});


function readCSV(file){
    $.ajax({
        type: "POST",
        url: "ajax/read.php",
        data: {file: file},
        contentType: false,
        processData: false
    }).success(function(data){
        console.log(data);
    }).fail(function(){
        console.log('error');
    });
}

【问题讨论】：

检查stackoverflow.com/questions/19722920/…
@jQuery.PHP.Magento.com 我已经尝试过这种方法，但它会返回一个空数组，如我的帖子中所述。 var_dump($_REQUEST) 和 var_dump($_POST) 都可以。
@entiendoNull 谢谢，我会尝试按照该教程进行操作，看看它是否有效。一旦我尝试过，我会提供更新。
Aah 使用$.ajaxForm() 函数时请求似乎已正确发送！感谢您的帮助@entiendoNull！（如果您关心某些观点，您当然可以“回答”该帖子，以便我接受您的回答。）
我已将我的评论添加为帖子，以防将来有类似问题的其他人有所帮助。如果此解决方案对您有所帮助，请随时将其标记为正确的 :)

标签： javascript php jquery ajax blob

【解决方案1】：

就我而言，如果没有外部库，AJAX 上传就不容易完成。至少，这是我第一次需要这样做时学到的。

http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

本指南非常好，但如果您使用的是较新版本的 jQuery，则有点过时了。您可能需要更改一些已弃用的功能，例如（.live() 到 .on()）。

最后，我可以热情地推荐它作为一个好的开始。我已经广泛使用它多年并取得了巨大的成功。

祝你好运！

【讨论】：