flask使用原生ajax、不使用表单(Form)上传文件
〇、知识点
jquery ajax 文档告诉你可以使用默认的 application/x-www-form-urlencoded, multipart/form-data, or text/plain 这三种，其它的也可以，但是需要告诉ajax 的怎样序列化它。——这句话来源于：https://www.cnblogs.com/htoooth/p/7242217.html
一、原生ajax、不使用表单(Form)
app.py
import os
from flask import Flask, request, jsonify, render_template
from werkzeug import secure_filename UPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif']) app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS @app.route('/')
def index():
return render_template('index.html') @app.route('/uploadfile', methods=['POST'])
def upload_file():
if request.method == 'POST':
print('request.files', dir(request.files))
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
url = os.path.join(app.config['UPLOAD_FOLDER'], filename)
file.save(url)
return jsonify(dict(url=url,)), 201 if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Flask上传图片演示三</title>
</head>
<body>
<h1>Flask上传本地图片示例三</h1>
<p>不使用表单Form，原生javascript实现ajax，返回上传的图片所保存的位置</p> <input type="file" name="file" />
<br>
<input type="button" value="上传" /> <p id="res"></p>
<script>
var file = document.querySelector('input[type="file"]');
var btn = document.querySelector('input[type="button"]'); //ajax
btn.addEventListener('click', function(event){
event.preventDefault(); var data = new FormData();
data.append(file.name, file.files[0]);var xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadfile', true);
//xhr.setRequestHeader("Content-Type", "multipart\/form-data;"); //千万不能要这一句，否则后台request.files读不到file
xhr.send(data); xhr.addEventListener('loadend', function(){
if(xhr.status == 201){
var res_json = JSON.parse(xhr.responseText);
document.querySelector('#res').innerHTML = "上传的图片保存在：" + res_json.url;
}
}, false);
}, false);
</script>
</body>
</html>
二、原生ajax、使用表单(Form)
app.py
import os
from flask import Flask, request, jsonify, render_template
from werkzeug import secure_filename UPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif']) app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS @app.route('/')
def index():
return render_template('index.html') @app.route('/uploadfile', methods=['POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
url = os.path.join(app.config['UPLOAD_FOLDER'], filename)
file.save(url)
return jsonify(dict(url=url,)), 201 if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Flask上传图片演示二</title>
</head>
<body>
<h1>Flask上传本地图片示例二</h1>
<p>使用表单Form，原生javascript实现ajax，返回上传的图片所保存的位置</p> <!-- <form enctype='multipart/form-data'> 注意：非必须指定enctype='multipart/form-data' -->
<form>
<input type="file" name="file"/>
<br>
<input type="submit" value="上传"/>
</form> <p id="res"></p>
<script>
var form = document.querySelector('form'); //ajax
form.addEventListener('submit', function(event){
event.preventDefault(); var xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadfile', true);
xhr.send(new FormData(form)); //注意：不需要设置Content-Type xhr.addEventListener('loadend', function() {
if(xhr.status == 201){
var res_json = JSON.parse(xhr.responseText);
document.querySelector('#res').innerHTML = "上传的图片保存在：" + res_json.url;
}
}, false);
}, false);
</script>
</body>
</html>
三、无ajax、只使用表单(Form)
app.py
import os
from flask import Flask, request, redirect, url_for, render_template
from werkzeug import secure_filename UPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif']) app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS @app.route('/')
def index():
return render_template('index.html') @app.route('/uploadfile', methods=['POST'])
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return redirect(url_for('uploaded_file', filename=filename)) from flask import send_from_directory
@app.route('/uploads/<filename>')
def uploaded_file(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'], filename) if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Flask上传图片演示一</title>
</head>
<body>
<h1>Flask上传本地图片示例一</h1>
<p>使用表单Form，无javascript，跳转显示上传的图片</p> <form action="/uploadfile" enctype='multipart/form-data' method='POST'> <!-- 注意：三个全指定action, enctype, method -->
<input type="file" name="file" style="margin-top:20px;"/>
<br>
<input type="submit" value="上传" style="margin-top:15px;"/>
</form>
</body>
</html>
四、预览、无Form、原生ajax
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Flask上传图片演示四</title>
</head>
<body>
<h1>Flask上传本地图片示例四</h1>
<p>上传前预览图片，不使用表单Form，原生ajax，返回上传的图片所保存的位置</p> <img id="base64image" src="" style="max-height:150px;"/>
<br />
<input type="file" name="image" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
<br />
<input type="button" value="上传"/> <p id="res"></p> <script>
var base64image = document.querySelector('#base64image');
var fileElement = document.querySelector('input[type="file"]');
var btnElement = document.querySelector('input[type="button"]'); //预览
fileElement.addEventListener('change', function(event){
if (!event.target.files || !event.target.files[0]) {
return;
}
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]); reader.addEventListener("load", function(e){
base64image.src = e.target.result; //base64编码
}, false);
},false); //ajax
btnElement.addEventListener('click', function(event){
event.preventDefault(); var data = new FormData();
data.append(fileElement.name, fileElement.files[0]); //添加图片信息 var xhr = new XMLHttpRequest();
xhr.open("post", "/uploadfile", true);//true即异步
//xhr.setRequestHeader('Content-Type', 'multipart/form-data'); //千万别写这句！！
xhr.send(data); xhr.addEventListener("loadend", function(event){
if(xhr.status == 201){ // 201，去看app.py！！
var res = JSON.parse(xhr.responseText); //接收的是json数据
console.log(res);
}
}, false);
},false);
</script>
</body>
</html>
flask使用原生ajax、不使用表单(Form)上传文件的更多相关文章
- Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- c# 模拟表单提交，post form 上传文件、大数据内容
表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...
- c# 模拟表单提交，post form 上传文件、数据内容
转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...
- Java模拟表单POST上传文件
JAVA模拟表单POST上传文件 import java.awt.image.BufferedImage;import java.awt.image.ColorModel;import java.io ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- web 表单方式上传文件方法（不用flash插件）
原理:使用表单的input type="file"标签,通过ajax提交表单请求,后台获取请求中的文件信息,进行文件保存操作 由于我测试用的做了一个上传文件和上传图片方法,所以我有 ...
- 通过form上传文件（php）
前段代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- 关于form 上传文件时的小问题
平时的form一般写成这样: <form action=" " method="" id="" name=""&g ...
- 关于vue使用form上传文件
在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...
随机推荐
- Tomcat_记一次tomcatwar包应用简单部署过程
记一次tomcat war包应用简单部署过程 by:授客 QQ:1033553122 1. 实践环境 Linux apache-tomcat-7.0.73 2. 实践步骤 # 解压tomcat压缩 ...
- 入手FUJIFILM X100S
有个朋友买了,用了说很好,于是在秋叶原的yodobashi体验了好几个星期天之后,终于下定决心出手了,购入了黑色限量版,还能用优惠券减免了200美元,最后全套1200美元.黑色限量版还包括了转接环,那 ...
- Android udp json+数组 --->bytes发送数据
Android json支持五种数据类型 String / int(float)/bool / null / object 今天说 object : json = new JSONObject( ...
- 关于谷歌JSV8与微软JSRT的性能比较
首先,我并没有得到实际的比较结果,望有兴趣的朋友可以帮助完成这个比较. benchmarksgame,提供了各种语言的性能比较,但都为linux下的测试,很难比较谷歌与微软的东西. 众所周知,JSV8 ...
- Java中线程的同步问题
在生活中我们时常会遇到同步的问题,而且大多数的实际问题都是线程的同步问题 我这里以生活中的火车售票来进行举例: 假设现在我们总共有1000张票要进行出售,共有10个出售点,那么当售票到最后只有一张票时 ...
- [20170611]关于数据块地址的计算.txt
[20170611]关于数据块地址的计算.txt --//如果数据库出现一些问题,会在alert或者跟踪文件,或者屏幕出现一些错误提示.例如: ORA-00600: internal error co ...
- C#-类（九）
类的定义 类是描述具有相同特征与行为的事物的抽象,类内部包含类的特征和类的行为 类支持继承 类的定义是关键字class为标志 类的格式 访问标识符 class 类名 { 类主体 } 访问标识符:指定了 ...
- android调试工具adb命令大全
转载: 一.adb介绍SDK的Tools文件夹下包含着Android模拟器操作的重要命令adb,adb的全称为(Android Debug Bridge就是调试桥的作用.通过adb我们可以在Eclip ...
- SQL Server数据类型int、bigint、smallint、tinyint对比表
SQL Server数据类型int.bigint.smallint.tinyint对比表 数据类型 范围 存储 bigint -2^63 (-9,223,372,036,854,775,808) 到 ...
- JavaScript -- 时光流逝（一）：数据类型，变量，类型转换，函数
JavaScript -- 知识点回顾篇(一):数据类型,变量,类型转换,函数 1. 数据类型 Boolean:值类型,布尔(逻辑)只能有两个值:true 或 false. Number:值类型,Ja ...