时间戳

首页 > 解决方案 > jQuery AJAX 文件上传 - 从输入中获取实际文件

jquery - jQuery AJAX 文件上传 - 从输入中获取实际文件

问题描述

我正在尝试使用 jQuery AJAX 将简单的文件上传到 Flask 服务器。我的 jQuery 相对令人震惊，所以我认为我在为我的 AJAX 调用从输入字段收集文件的部分很挣扎。

HTML

<form name="csvimportdataform" id="csvimportdataform">
    <input id="csvfile" name="csvfile" type="file" class="form-control-file">
    <button id="importdata" name="importdata" class="btn btn-info" type="submit">Proceed</button>
</form>

jQuery

$("form[name='csvimportdataform']").submit(function (event) {

    event.preventDefault();

    var form_data = $('#csvfile').prop('files')[0];

    $.getJSON("/AJAX_call", form_data, function (data) {
        //code to do stuff with the response

    });

});

当我在提交表单时检查控制台是否有错误时，我得到TypeError: Illegal invocation... at HTMLFormElement.v.handle- 如果需要更多信息，请告诉我。谢谢

标签： jqueryajax

解决方案

由于我不确定您想对服务器端的数据做什么以及服务器的响应应该如何，因此我使用了标准示例来上传文件。

@app.route('/upload-csv', methods=['POST'])
def upload_csv():
    if 'csvfile' in request.files:
        file = request.files['csvfile']
        if file.filename == '':
            return '', 400
        dest = os.path.join(
            current_app.instance_path,
            current_app.config.get('UPLOAD_FOLDER', 'files'),
            secure_filename(file.filename)
        )
        file.save(dest)
        return '', 201
    return '', 400

要通过 Ajax 传输表单的数据，您可以使用FormData类型的对象。
数据通过表单的 POST 方法作为“multipart/form-data”发送。

jquery 中有许多函数可以发送和查询数据。该$.ajax(...)变体是最通用的。

<form name="csvimportdataform" id="csvimportdataform">
    <input 
        type="file" 
        name="csvfile" 
        id="csvfile" 
        class="form-control-file"
    />
    <button
        type="submit"
        name="importdata" 
        id="importdata" 
        class="btn btn-info" 
    >Proceed</button>
</form>

<script type="text/javascript">
$("form[name='csvimportdataform']").submit(function (event) {
  event.preventDefault();
  const formData = new FormData($(this)[0]);
  $.ajax({
    type: 'POST',
    url: '/upload-csv',
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
      console.log("success");
    }
  });
});
</script>

推荐阅读