javascript - 在 Javascript 中使用 reqwest 处理文件上传

Question

我正在使用以下系统来处理 AJAX 上传:https://github.com/ded/reqwest

虽然它适用于我迄今为止尝试过的所有内容 - 我现在需要上传文件(当输入更改时)。你怎样做呢？到目前为止我已经:

document.getElementById('upload-file').addEventListener("change", function(e){

    var formData = new FormData();
    var file = e.currentTarget.files[0];

    reqwest({
        url: '/cgi-bin/upload.cgi',
        type: 'json',
        method: 'post',
        headers: {
              'enctype': 'multipart/form-data'
            },
        data: { the_file: file },
        error: function (err) {
            alert("There was an error: " + err)
        },
        success: function (data) {

        }
    });


});

不幸的是，这只发送:

the_file [object+File]

...文件中没有附加任何数据。

Answer 1

您需要使用FileReader API。

document.getElementById('upload-file').addEventListener("change", function(e){
    var formData = new FormData();
    var file = e.currentTarget.files[0];
    var reader = new FileReader();

    // The load event is fired each time the reading operation is successfully completed. 
    reader.onload = function(event) {
        var jsonData = JSON.parse(event.target.result);  // event.target.result is the file's data
        reqwest({
            url: '/cgi-bin/upload.cgi',
            type: 'json',
            method: 'post',
            headers: {
                  'enctype': 'multipart/form-data'
                },
            data: { the_file: file },
            error: function (err) {
                alert("There was an error: " + err)
            },
            success: function (data) {

            }
        });  
    }

    reader.readAsText(file);
});