通过 AJAX returns 'blob' 错误发送文件

Question

我正在尝试发出一个 AJAX 请求向我的控制器发送一个文件，然后它应该继续读出发送的文件和 return 一个排序的数组返回到前端，虽然它不起作用，因为我卡在 'blob' not set 错误上。我已经搜索过但没有真正找到我正在寻找的答案，因此我为什么要创建这个问题。

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

'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 要求，但如果我设置这些参数，我的服务器只会发回一个空数组，我猜测并不奇怪，因为我没有处理任何数据。

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

编辑：

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

$(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');
    });
}

Answer 1

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

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

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

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

祝你好运！

通过 AJAX returns 'blob' 错误发送文件

Sending file through AJAX returns 'blob' error

javascript

php

ajax

jquery

blob