使用Javascript中的reqwest处理文件上载

时间:2018-03-27 06:42:03

标签: javascript reqwest

我正在使用以下系统来处理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]

...没有数据附加到文件。

2 个答案:

答案 0 :(得分:1)

您需要使用FileReader API。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Current Temperature:</h4>
<h1 class="weather-temperature farenheit celcius" id="temp"></h1>
<button id="toggle">Toggle F&deg;/C&deg;</button>

答案 1 :(得分:0)

我刚刚在这里找到答案:

https://github.com/ded/reqwest/issues/135

事实证明你需要:

processData: false, // important

所以完整的代码:

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

    }
});

它现在完美地发送文件:)