Python flask使用ajax上传文件的示例代码
作者:CDamogu 发布时间:2021-06-25 17:40:29
标签:Python,flask,ajax,上传文件
前言
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代码部分
<form id="uploadForm" method="post" enctype="multipart/form-data">
<label >上传电子书</label>
<input type="file" name="file" >
<button id="upload" type="button" name="button" >上传</button>
</br>
</br>
</br>
</form>
javascript代码部分
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js "></script>
<script>
$("#upload").click(function(){
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "{{ url_for('.regression_report') }}", //上传文件的请求路径必须是绝对路劲
data: formData,
cache: false,
processData: false,
contentType: false,
success:function(data){
// 这里是访问成功时被自动执行的代码
// 拆分返回值信息(具体返回什么东西就看视图函数中定义的json格式)
status_ret = data.status;
errmsg_ret = data.errmsg;
layer.msg(errmsg_ret);
switch (status_ret){
case 0:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
default:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
}
},
error:function(jqXHR){
// 这里是访问失败时被自动调用的代码
}
});
});
</script>
当你的页面样式比较多的时候,可能上述方法无法传入文件,下面这种方法比较强,推荐看看
<form class="info" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>File upload</label>
<input id="id_regression_html" type="file" name="regression_html" class="file-upload-default">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info" disabled="" placeholder="Upload Regression.html">
<span class="input-group-append">
<button id="html_upload" class="file-upload-browse btn btn-gradient-primary" type="button">Html Upload</button>
</span>
</div>
</div>
<button id="id_ajax_submit" type="button" class="btn btn-gradient-primary mr-2">Submit</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js "></script>
<script>
$("#id_ajax_submit").click(function(){
// var formData = new FormData($('#uploadForm')[0]);
let formData = new FormData();
let my_file = document.getElementById('id_regression_html');
// @Param: <input name="regression_html">
// @Param: myFile.file[0]为第一个文件(单选),多个文件(多选)则要循环添加
formData.append('regression_html',my_file.files[0]);
$.ajax({
type: 'post',
url: "{{ url_for('.regression_report') }}", //上传文件的请求路径必须是绝对路劲
data: formData,
cache: false,
async: false,
processData: false, //告诉jquery不要处理发送的数据
contentType: false, //告诉jquery不要设置content-Type请求头
success:function(data){
// 这里是访问成功时被自动执行的代码
// 拆分返回值信息(具体返回什么东西就看视图函数中定义的json格式)
status_ret = data.status;
errmsg_ret = data.errmsg;
layer.msg(errmsg_ret);
switch (status_ret){
case 0:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
case 1:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
default:
setTimeout(function(){window.location.href = "{{ url_for('.regression_report') }}";},"2000");
break
}
},
error:function(jqXHR){
// 这里是访问失败时被自动调用的代码
}
});
});
</script>
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
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" multiple="multiple" />
</form>
<button id="btnUpload">上传文件</button>
js
<script>
$("#btnUpload").on("click", function(){
var formdata = new FormData($("#uploadForm")[0]);
alert(formdata);
$.ajax({
type: "post",
url: "/Attendance/UploadFile2/",//url地址
contentType: false,
cache: false,
processData: false,
data: formdata,
success: function (data) {
console.log(data);
}
});
});
</script>
出问题解决方案
//将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]);
}
来源:https://blog.csdn.net/qq_33704787/article/details/126003341
0
投稿
猜你喜欢
- 楔子随着自媒体时代,现在对视频的处理变得越来越常见。我们可以使用Adobe的一些专业工具,但是效率不高;如果只是对视频进行一些简单的处理的话
- 前言文接上回,我们已经使用gojs实现了一个最最最基本的树形布局。这次我们开始对图形的骨架进行一个内容展示上的丰富和显示风格上的美化。可以说
- 如果机房马上要关门了,或者你急着要和MM约会,请直接跳到第四个自然段。以下叙述的脚本包括服务器端脚本和客户端的脚本,服务器端脚本指在服务器上
- 什么是MySql数据库?通常意义上,数据库也就是数据的集合,具体到计算机上数据库可以是存储器上一些文件的集合或者一些内存数据的集合。我们通常
- 判断类型在Python中我们可以使用type进行类型的判断#我们想看一个对象的的类型可以这样class A: passa = A
- httpwatch 的页面元素加载时间表里面有一堆的英文,平时也没注意看,今天瞟了一眼,觉得应该有些用处,就看了看,随便用蹩脚的英语水平翻译
- 如下所示:<?phpnamespace helpers;class OpensslRSA{ //echo $private_key 私
- 本文实例讲述了php实现压缩多个CSS与JS文件的方法。分享给大家供大家参考。具体实现方法如下:1. 压缩css<?php
- 页面跳转页面跳转的url中必须在最后会自动添加【\】,所以在urls.py的路由表中需要对应添加【\】from django.shortcu
- 使用ASP做网站虽然有点落伍,但在中国还是有很大市场的,因为大部分国内用户使用Windows Server服务器,在Windows Serv
- 在实际编程开发中,我们会使用到各类的加密算法来对数据和信息进行加密。比如密码中比较常见的MD5加密,以及AES加密等等。对于密码认证来说,M
- 为什么在facebook交友会更容易?facebook与传统的BSP(Blog Service Provider)到底有什么不同?是因为它有
- 前言:python 中协程概念是从 3.4 版本增加的,但 3.4 版本采用是生成器实现,为了将协程和生成器的使用场景进行区分,使语义更加明
- 准备工作我们需要把秒杀的商品加入购物车,因为脚本点击的是全选,所以不需要的商品要移出购物车。过程分析1.打开某宝网站;pq = webdri
- 本文实例讲述了Python实现桶排序与快速排序算法结合应用的方法。分享给大家供大家参考,具体如下:#-*- coding: UTF-8 -*
- 一、类和对象Python属于动态类型的语言,而动态语言和静态语言最大的不同,就是函数和类的定义,不是编译时创建的,而是运行时动态创建的,比方
- 前言之前的文章编写了一个返回json的例子,直接用浏览器进行get请求虽然成功了, 但是接口文档的样式很难看, 不好用. 而且提示没有访问权
- b.php的代码 <?php //只能通过post方式访问 if ($_SERVER['REQUEST_METHOD'
- 问题一:TypeError: a bytes-like object is required, not 'str'解决:该问
- 什么是Elasticsearch?Elasticsearch是基于Lucene库的搜索引擎。它提供了具有HTTP Web界面和无模式JSON