jQuery AJAX文件上传-从输入中获取实际文件 [英] jQuery AJAX file upload - getting the actual file from input

问题描述

我正在尝试使用jQuery AJAX将简单的文件上传到Flask服务器.我的jQuery相对令人震惊，因此，我想为从AJAX调用的输入字段中收集文件而做的努力.

I am trying to do a simple file upload to Flask server using jQuery AJAX. My jQuery is relatively shocking, and so I think I am struggling at the part of collecting the file from the input field for my AJAX call.

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

    });

});

当我在提交表单时检查控制台中的错误时，我在HTMLFormElement.v.handle 处收到 TypeError:非法调用 ... -让我知道是否还有更多信息这里需要.谢谢

When I check the console for errors when submitting the form, I get TypeError: Illegal invocation...at HTMLFormElement.v.handle - let me know if more is needed here. Thanks

推荐答案

由于不确定服务器端的数据以及服务器的响应方式，我不确定使用标准的示例，用于上传文件.

Since I'm not sure what you want to do with the data on the server side and how the server's response should be, I used the standard example for uploading files.

@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传输表单数据，可以使用

To transfer the data of the form via Ajax you can use an object of the type FormData.
The data is sent with the POST method of a form as "multipart/form-data".

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

There are many functions within jquery that enable the sending and querying of data. The $.ajax(...) variant is the most versatile.

<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>

这篇关于jQuery AJAX文件上传-从输入中获取实际文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！