dqhnp44220 2015-03-23 15:31
浏览 367
已采纳

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

I'm trying to make an AJAX request send a file towards my controller, which then should proceed to read out the sent file and return a sorted array back to the front-end, though it doesn't work as I'm stuck on a 'blob' not set error. I've searched about but didn't really find the answer I was looking for, thus why I'm creating this question.

Currently I'm receiving the following TypeError:

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

The data that I'm trying to send is as following:

http://piclair.com/qk8ms (pic because I can't copy the data directly from my browser.)

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

The PHP handler, though I guess that part is kind of irrelevant for this problem:

<?php
    var_dump($_POST);

I've found someone saying that setting processData: false and contentType: false would let the script ignore the blob requirment, but if I set those parameters my server just sends back an empty array, which I guess is no suprise as I'm not processing any data.

So I'm hoping someone knows a solution to this problem and is able to help me out.

EDIT:

Just to make clear which method I've tried that returns an empty array, here is the alternate code:

$(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');
    });
}
  • 写回答

1条回答 默认 最新

  • douzi2778 2015-03-23 17:03
    关注

    As far as I am concerned AJAX uploads are not easily done without external libraries. At least, that is what I learned the first time I needed this done.

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

    This guide is pretty good, but a little bit outdated if you are using a newer version of jQuery. You might need to change some deprecated functionality such as (.live() to .on()).

    In the end I can warmly recommend it as a good start. I've used it widely for years and with great success.

    Good luck!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 无法使用此凭据登录,因为你的域不可用,如何解决?(标签-Windows)
  • ¥15 yolov9的训练时间
  • ¥15 二叉树遍历没有报错但无法正常运行
  • ¥15 在linux系统下vscode运行robocup3d上场球员报错
  • ¥15 maven环境配置后无法运行mvn -v
  • ¥15 Python语言实验
  • ¥15 SAP HANA SQL 增加合计行
  • ¥20 用C#语言解决一个英文打字练习器,有偿
  • ¥15 srs-sip外部服务 webrtc支持H265格式
  • ¥15 在使用abaqus软件中,继承到assembly里的surfaces怎么使用python批量调动