在表单中上传文件时,一定要加入 enctype="multipart/form-data" 属性

为什么要加入这个属性呢:

enctype就是encodetype就是编码类型的意思。

multipart/form-data是指表单数据有多部分构成,既有文本数据,又有文件等二进制数据的意思。

需要注意的是:默认情况下,enctype的值是application/x-www-form-urlencoded,不能用于文件上传,只有使用了multipart/form-data,才能完整的传递文件数据。

application/x-www-form-urlencoded只能上传文本格式的文件,而multipart/form-data是讲将文件以二进制的形式上传,可以实现多种文件的上传

一般获取上传的数据可以用request.form[],[]中填入name属性

而在视图函数中获取表单上传的文件可以用request.file.get()方法,get中填name属性

而上传文件到指定文件夹,有几种方法

我这是使用的是: 文件.save(文件路径)

数据库表模型和视图函数如下:

class Users(db.Model):
__tablename__ = 'users'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(48), unique=True)
sex = db.Column(db.String(12))
pic = db.Column(db.String(48))
@app.route('/index/', methods=['GET', 'POST'])
def index():
if request.method == 'GET':
return render_template('index.html')
if request.method == 'POST':
     # 获取上传的文件和数据
icons = request.files.get('icons')
name = request.form['name']
sex = request.form['sex']
# 指定上传路径
UPLOAD_DIC = 'static/upload'
# 拼接文件全路径
file_path = os.path.join(UPLOAD_DIC,icons.filename)
# 上传文件到指定路径
icons.save(file_path)
user= Users(name=name, sex=sex, pic=file_path)
db.session.add(user)
db.session.commit()
msg = '上传成功'
return render_template('index.html',msg=msg,pic = file_path)
模板如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" >
{% if pic %}
<div >
<img style="width: 200px;height: 100px" src="/{{ pic }}/ " alt="">
</div>
{% endif %}
<label for="name">姓名</label>
<input type="text" id="name" name="name">
<label for="sex"></label>
<br>
男<input type="radio" name="sex" id="sex" value="男">
女<input type="radio" name="sex" id="sex" value="女">
<br>
<input type="file" name="icons">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>

flask中的表单文件上传的更多相关文章

  1. 表单文件上传,ajax文件上传

    原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码  index.jsp(表单文件上传) <form action="sh ...

  2. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  3. 混合表单文件上传到数据库(基于TOMCAT)

    在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...

  4. 利用socket模拟http的混合表单上传(在一个请求中提交表单并上传多个文件)

           在非常多企业级应用中,我们都没法直接通过开发语言sdk包封装的http工具来模拟http复合表单(multipart/form-data),特别是在跨语言跨平台的编程过程中.事实上实现方 ...

  5. 如何使用PHP上传文件,上传图片,php上传教程,php表单文件上传教程

    使用PHP进行文件上传,主要使用到表单功能和PHP内置的$_FILES函数功能.接下来我们看如何实现PHP上传功能.例子效果图,此例子是在Mac下进行调试成功的. PHP上传图片文件的功能代码如下: ...

  6. form表单文件上传 servlet文件接收

    需要导入jar包 commons-fileupload-1.3.2.jar commons-io-2.5.jar Upload.Jsp代码 <%@ page language="jav ...

  7. 【Demo Project】AjaxSubmit+Servlet表单文件上传和下载

    一.背景 前段时间公司要求我做一个上传和下载固件的页面,以备硬件产品在线升级,现在我把这部分功能抽取出来作为一个Demo Project给大家分享. 话不多说,先看项目演示 --> 演示  源码 ...

  8. 表单文件上传编码方式(enctype 属性)

    enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 如下: <form action="upload.php" method="post&quo ...

  9. form表单文件上传提交且接口回调显示提交成功

    前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...

随机推荐

  1. Spring事务Transactional和动态代理(二)-cglib动态代理

    系列文章索引: Spring事务Transactional和动态代理(一)-JDK代理实现 Spring事务Transactional和动态代理(二)-cglib动态代理 Spring事务Transa ...

  2. Asp.Net Core EndPoint 终点路由工作原理解读

    一.背景 在本打算写一篇关于Identityserver4 的文章时候,确发现自己对EndPoint -终结点路由还不是很了解,故暂时先放弃了IdentityServer4 的研究和编写:所以才产生了 ...

  3. 基于netty的群聊

    基于netty的群聊 学了一段时间的netty知识,现在通过这个基于console的程序来对netty的相关接口做个简单的应用. 准备 依赖 <dependency> <groupI ...

  4. kafka知识整理

    title: kafka知识整理 date: 2019-06-18 10:59:46 categories: MQ tags: kafka --- 转载自:https://www.cnblogs.co ...

  5. jinja2的url_for 和数据块

    1.静态文件引入:{{ url_for('static', filename='文件路径') }}   2.定义路由:{{ url_for('模块名.视图名',变量=参数) }}   3.定义数据块: ...

  6. VUE四 axios详解

    axios的中文文档写的已经很详细 https://www.kancloud.cn/yunye/axios/234845

  7. R语言实战(二) 创建数据集

    2.1 数据集的概念 不同的行业对于数据集的行和列叫法不同.统计学家称它们为观测(observation)和变量(variable),数据库分析师则称其为记录(record)和字段(field),数据 ...

  8. Django中ORM中的get与filter区别

    本文出自 “orangleliu笔记本” 博客,出处http://blog.csdn.net/orangleliu/article/details/38597593 Django的orm中get和fi ...

  9. ESLint {} 内部强制有空格 .eslintrc.js 配置文件 'object-curly-spacing': ["error", "always"],

    module.exports = { root: true, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { 'obj ...

  10. JS中的call()方法和apply()方法用法总结(挺好 转载下)

    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...