您现在的位置是:网站首页> 编程资料编程资料
Python flask使用ajax上传文件的示例代码_python_
2023-05-26
283人已围观
简介 Python flask使用ajax上传文件的示例代码_python_
前言
JS
为什么要用ajax来提交
在使用from提交时,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
为安全起见,即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略,并且对于此类元素来说,value属性是只读的,这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名时,file-upload 元素触发 onchange 事件句柄。
利用form提交会导致页面刷新,体验不好,所以使用AJAX进行文件上传是个不错的选择。但这需要我们自己来组织通过POST请求发送的内容
FormData对象
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。 —— MDN web docs
Form的enctype属性
enctype这个属性管理的是表单的MIME编码,它一共有三个属性:
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
| multipart/form-data | 不对字符编码,用来制定传输数据的特殊类型,如mp3、jpg |
| text/plain | 纯文本传输 |
Input
| value | 保存了用户指定的文件的名称 |
|---|---|
| type=“file” | 设置input类型为file |
| multiple=“multiple” | 可多选,不设置为单选 |
| accept=“…” | 设置可选文件的MIME_type。在设置之后点击选择文件按钮会默认显示符合设置的MIME_type的文件(存在兼容性)。具体的文件类型对应的MIME类型可以搜索到,这里列出我用到的类型: |
MIME类型(更多直接百度,类型超乎你的想想)
| 文件类型 | MIME类型 |
|---|---|
| .txt | text/plain |
| application/pdf | |
| .doc | application/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .xls | application/vnd.ms-excel |
| .ppt | application/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
上传单个文件
html代码部分
javascript代码部分
当你的页面样式比较多的时候,可能上述方法无法传入文件,下面这种方法比较强,推荐看看
flask 视图函数部分
@admin_blu.route("/toolReg", methods=['GET', 'POST']) def regression_report(): if request.method == "GET": return render_template('index.html') elif request.method == "POST": # TODO: 获取设置 # TODO: 获取文件 f = request.files.get('file') if f and f.filename.__contains__('.html'): upload_path = os.path.join(current_app.root_path, 'static/upload/html', f.filename) download_path = os.path.join(current_app.root_path, 'static/upload/html', 'xlsx') # TODO: 类实例化,同步执行 f.save(upload_path) ret = { "status": 0, "errmsg": "上传成功" } return jsonify(ret) return redirect(url_for(".index.html")) 上传多个文件
html
js
出问题解决方案
//将formdata改用下面的方式试下 var formdata = new FormData(); var files = $("input[type='file']")[0].files; for (var i = 0; i < files.length; i++) { formdata.append("file", files[i]); } 到此这篇关于Python flask使用ajax上传文件的文章就介绍到这了,更多相关Python flask上传文件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- 以SortedList为例详解Python的defaultdict对象使用自定义类型的方法_python_
- Python一步步带你操作Excel_python_
- python opencv实现目标外接图形_python_
- python opencv实现图像矫正功能_python_
- pandas删除某行或某列数据的实现示例_python_
- python中的[1:]、[::-1]、X[:,m:n]和X[1,:]的使用_python_
- opencv+python实现图像矫正_python_
- 使用Cython中prange函数实现for循环的并行_python_
- python实现字母闪烁效果的示例代码_python_
- 利用Python编写简易的录制屏幕小工具_python_
