通过AJAX上传Posting文件在Flask端返回空字典
。
AJAX是一种在Web应用中，用于实现异步通信的技术，可以在不刷新整个页面的情况下，与服务器进行数据交互。Flask是一种轻量级的Python Web框架，适用于构建小型的Web应用。在Flask中，我们可以通过AJAX上传文件，并在服务器端进行处理。
具体实现步骤如下：
- 前端实现：使用HTML的form表单和JavaScript的XMLHttpRequest对象来实现AJAX文件上传。可以通过input标签的type属性设置为file，让用户选择需要上传的文件。然后在JavaScript中，创建一个FormData对象，并将选择的文件添加到该对象中。接着，使用XMLHttpRequest对象将FormData对象发送到服务器端。在发送请求之前，需要设置XMLHttpRequest对象的enctype属性为multipart/form-data，以支持文件上传。
- 后端实现：在Flask端，可以使用Flask框架提供的request对象来获取上传的文件。通过request.files可以获取到上传的文件对象。然后可以对文件进行处理，例如保存到服务器的指定位置。在本例中，我们需要处理上传的文件，并返回一个空字典。
以下是示例代码：
前端代码（HTML + JavaScript）：
<!DOCTYPE html>
<html>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file">
<input type="button" value="Upload" onclick="uploadFile()">
</form>
<script>
function uploadFile() {
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send(formData);
}
</script>
</body>
</html>后端代码（Python + Flask）：
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/upload', methods=['POST'])
def upload():
file = request.files['file']
# 处理上传的文件...
result = {} # 返回空字典
return jsonify(result)
if __name__ == '__main__':
app.run()在以上代码中，前端代码中的xhr.open("POST", "/upload", true)将请求发送到Flask应用的/upload路由。后端代码中的@app.route('/upload', methods=['POST'])用于指定处理该路由的函数。函数中通过request.files['file']获取上传的文件对象，然后可以对文件进行进一步处理。最后，通过jsonify(result)将处理结果返回给前端。
关键词概念：AJAX、Flask、文件上传、FormData、XMLHttpRequest、request.files、jsonify。
推荐的腾讯云相关产品：腾讯云云服务器（ECS）、腾讯云对象存储（COS）、腾讯云内容分发网络（CDN）等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多详情和产品信息。
相关·内容
我有一个Flask应用程序，它一直在工作，直到我添加登录功能。我的问题是，我有一个模式，用户可以上传一个文件。调用上传文件： // add notes post files = request.files.get(
浏览 23提问于2021-10-22得票数 0
回答已采纳
我需要得到一个网址，以重定向到从服务器(使用Flask)后，一些文件完成上传，以便我可以重定向到它。我不能使用flask来做这件事，因为它根本不起作用，而且在使用服务器端重定向在POSTing大型或多个文件之后尝试重定向显然是某种浏览器问题。我正在尝试将URL抛回JS，它将在检查所有文件都已上载后执行重定向。JS与HTML在一个单独的文件中，但是dropzone的url:是
浏览 2提问于2014-03-08得票数 1
2回答
基本上，如何通过FileUpload控件的上传事件将文件从网页文件输入框上传到web服务器(例如托管.net站点)？我的朋友说，他的理解是，浏览器将整个文件编码到post请求中，然后将(大量) post发送到服务器。我认为情况不会是这样的，因为在收到完整的帖子之前，服务器将无法执行任何操作，因此无法构建ajax进度条，而在收到整个帖子之前，服务器可能只需将文件保存到磁盘。
浏览 4提问于2009-06-24得票数 16
回答已采纳
我试图更新数据，而不是在更改图像时添加(创建)新数据(图像在base64中)。 } else { } });
角模板文件
浏览 3提问于2015-10-22得票数 0
我希望我的用户能够上传图像到我的dropbox上的文件夹，并在我的数据库中存储其他信息(在这种情况下，产品信息，如价格，标题，重量，图像在dropbox上的位置)。现在，我在超文本标记语言表单中使用一个文件输入，通过将整个表单(包括图像)发布到服务器来提交图像，然后使用cURL将图像发送到dropbox，并等待响应成功。这对小文件很有效，但是Heroku有一个30秒的超时，我不能改变。对于大文件，整个文件上传到服务器，然后上传
浏览 32提问于2020-09-03得票数 1
回答已采纳
下面是我在index.html中的代码，它在单击按钮时向python服务器端发送一个POST请求： doWork()} console.log("posting</em
浏览 19提问于2021-05-28得票数 0
1回答
我正在更新一个使用AJAX并决定使用Flask的旧项目。对于我目前正在处理的特定页面，我需要能够上传CSV并读取文件中的数据(不需要保存它)。我还有其他几个使用AJAX的页面，但是它们会将表单数据返回给Flask (例如，是哪学期，哪一年，等等)。我已经找到了，并将我的MWE建立在它的基础上，但是当我看request.files时，我得到了一本空字典。():
app = Flask(__name__, template_fol
浏览 13提问于2022-01-28得票数 0
回答已采纳
使用AJAX来post和获取数据，我试图传递它，但它不能发送到Python。= reader.result; fd.append('file', base64data, 'audio.ogg'); }).done(function(data) { });Python服务器：
from fla
浏览 0提问于2020-03-09得票数 0
1回答
我正在通过我网站上的表单上传一个CSV (65KB)，用解析它，然后用ajax把它POSTing到我的服务器上：// if everything is ok, sendvia AJAX to process with PHP type: "POST", dataType，我可
浏览 3提问于2015-10-21得票数 1
我有一个flask应用程序在127.0.0.1:5000上运行，另一个网站在127.0.0.1:8000上运行。该网站具有js函数，向flask应用程序发出post请求，试图向flask应用程序发布一些字典数据。在js函数中，我使用了ajax： url: "http://127.0.0.1:5000/", he
浏览 0提问于2018-03-21得票数 0
用户通过单击选择一个图像，然后将其上传到不同的服务器。var img_data = new FormDa
浏览 0提问于2017-10-27得票数 0
2回答
filename', open('image.jpg', 'rb'))}r = requests.post(url, data=m)当它到达服务器后，我如何获得可用的东西的字典呢只展示如何发布，而不是如何在另一端处理它。有什么建议吗？
浏览 0提问于2014-03-11得票数 3
回答已采纳
2回答
通过ajax多上传器()上传文件(图像)。每个上传的文件都保存在临时文件中。将临时文件名放入带有原始名称键的字典中。随后，每个图像将被调整为几种大小，并保存到s3存储中。问题是，在设置了排除文件名的情况下，上传时至少有2个dict实例，所以我在最后得到了部分dict。我如何或在哪里存储字典，以便从任何线程更新它们。尝试全局加锁(
浏览 2提问于2012-10-06得票数 0
回答已采纳
1回答
我想使用烧瓶和jquery将一个字典(button_state)从javascript传递到python。在jquery方面，我有： newdata = JSON.stringify(buttons_state);console.log("submission button POST attempt: " + newdata)
url: '/submi
浏览 0提问于2018-10-29得票数 0
1回答
在HTML表单提交过程中的什么时候，文件会被上传到服务器上的临时目录(特别是PHP)？我有一个表单，其中有几个字段和一个文件上传。我正在通过AJAX处理此表单。我使用的是第三方插件，它通过AJAX上传文件(使用iFrame/xhr)。上传文件后，用户可以提交表单。从技术上讲，此文件输入字段位于表单中。当我通过A
浏览 0提问于2013-04-10得票数 1
回答已采纳
现在，我的代码在Submit按钮下显示一条绿色消息:您的消息已成功提交！它显示在contactform.addAjaxMessage下。我是否也需要更新该代码？这是我的contact-form.js文件： $("#feedbackSubmit").click(function() {sending e-mail return false;
//sen
浏览 0提问于2014-05-06得票数 0
我有一个表单，必须做多个文件上传一次，通过姜戈ModelForm。这是我的Django模型。
浏览 1提问于2017-04-30得票数 0
这是我的情况：
我想创建一个AJAX文件上传脚本，它将上传到外部站点(即:不是脚本所在的站点)，同时报告上传的进度。我该怎么做呢？请注意，该过程必须是安全的。
浏览 0提问于2009-10-03得票数 1
回答已采纳
ajax调用没有到达操作 [HttpPost] cache: false, processData: false在某些浏览器中，这种通过ajax进行的上传应该是可能的。我得到了这个服务器端错
浏览 1提问于2013-10-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
