Python flask使用ajax上传文件的示例代码

目录

• 前言
• JS
• Form的enctype属性
• Input
• MIME类型（更多直接百度，类型超乎你的想想）
• 上传单个文件
• html代码部分
• javascript代码部分
• flask 视图函数部分
• 上传多个文件
• html
• js
• 出问题解决方案

前言

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
.pdf	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代码部分

当你的页面样式比较多的时候，可能上述方法无法传入文件，下面这种方法比较强，推荐看看

  

    File upload
    
    

      
      
        Html Upload
      
    
  
  Submit

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上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！