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

我正在尝试使用jQueryAjax向Flask服务器上传一个简单的文件。我的jQuery相对来说是令人震惊的，因此我认为我在为AJAX调用从输入字段收集文件方面遇到了困难

HTML

---

当我在提交表单时检查控制台是否有错误时，我会在HTMLFormElement.v.handle上得到

TypeError:invally invocation

…

-如果需要更多，请告诉我。谢谢
因为我不确定您想对服务器端的数据做什么，以及服务器的响应应该如何，所以我使用标准上传文件

@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传输表单数据，可以使用以下类型的对象。

数据通过表单的POST方法作为“多部分/表单数据”发送

jquery中有许多函数支持数据的发送和查询。变体是最通用的

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


继续
$（“form[name='csvimportdataform']）。提交（函数（事件）{
event.preventDefault（）；
const formData=new formData（$（this）[0]）；
$.ajax({
键入：“POST”，
url:“/upload csv”，
数据：formData，
contentType:false，
cache:false，
processData:false，
成功：功能（数据）{
控制台日志（“成功”）；
}
});
});
非常感谢您，这非常有效。你帮了我这么多，我真是感激不尽。只是想澄清一下，
$。getJSON
不起作用的唯一原因是我们处理文件输入？谢谢again@KyleWalden
getJSON
使用HTTP GET，因此不适合此用途。您可以通过GET传输表单，但这种情况相对较少。在GET请求中，数据被附加到url，并在POST中找到它们在请求正文中的位置。您使用哪种方法在很大程度上取决于第三方的数量和可见性。
@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

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