flask(九)----jquery请求实现文件上传与访问

1.文件上传的html页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文件上传</title><!--引入jquery--><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body><form action="/upload" method="post" enctype="multipart/form-data"><input type="file" name="f"><br><br><input type="submit"></form><!--此处script标签与文件上传功能无关--><script>function send_ajax(){$.ajax({url:'http://127.0.0.1：5000',data:JSON.stringify({username:'chuntian',pwd:'123'}),type:'POST',dataType:'json',contentType:'application/json',   <!--此处指定为'appliction/json'格式，则jquery请求在后台接收用request.json;--><!--若没有指定'application/json'格式，后台接收用request.form。-->success:function(data){alert('成功')}});}</script></body>
</html>

2.后台处理

from flask import Flask, request, render_templateapp = Flask(__name__,template_folder='static')app.config['MAX_CONTENT_LENGTH'] = 10 * 1024 * 1024     # 限制上传的文件大小def allowed_files(filename):format_list = ['jpg', 'png', 'gif']file_type = filename.split('.')[1]if file_type in format_list:return Truereturn False@app.route('/upload', methods=['GET', 'POST'])
def upload():file = request.files.get('f')  # 从请求过来的数据中获取file,根据前端form表单中的文件name属性获取if file is None:return render_template('index.html')if allowed_files(file.filename):file.save(file.filename)  # 根据文件名保存return 'save success'return 'error'app.run(debug=True)

3.实现效果：

4.让文件可以被访问

import osfrom flask import Flask, request, render_template, send_from_directory
from werkzeug.utils import secure_filenameapp = Flask(__name__,template_folder='static')app.config['MAX_CONTENT_LENGTH'] = 10 * 1024 * 1024     # 限制上传的文件大小def allowed_files(filename):format_list = ['jpg', 'png', 'gif']file_type = filename.split('.')[1]if file_type in format_list:return Truereturn False@app.route('/upload', methods=['GET', 'POST'])
def upload():file = request.files.get('f')  # 从请求过来的数据中获取file,根据前端form表单中的文件name属性获取if file is None:return render_template('index.html')if allowed_files(file.filename):file.save(secure_filename(file.filename))  # 根据文件名保存,secure_filename:会自动将前端的输入去掉空格，填充格式，避免问题return 'save success'return 'error'@app.route('/upload/<filename>', methods=["GET"])
def get_file(filename):return send_from_directory(os.getcwd(), filename)  # 前端访问时需要返回的数据app.run(debug=True)

实现效果：

通常，我们把上传的图片的地址保存在数据库中，从数据库读取数据时，返回数据的地址，后端根据返回的地址查找图片。

flask(九)----jquery请求实现文件上传与访问相关推荐

【Flask】结合wtforms的文件上传表单
表单中的文件上传基本的表单渲染,表单类设置等等就不多说了,参看另一个文章即可.但是那篇文章里没有提到对于FileField,也就是上传文件的表单字段是如何处理,后端又是如何实现接受上传过来的文件的. ...
转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传过程,同时支撑多文 ...
jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
Python 技术篇-用flask服务实现mac本地文件上传至windows服务器指定文件夹下实例演示
操作 linux 主机的话用 paramiko 会简单很多,可以看我下面的文章. Python 技术篇-用 paramiko 库实现 winodws 本地文件上传至 linux 服务器实例演示首先是 ...
jquery uploadify 多文件上传插件使用经验
2019独角兽企业重金招聘Python工程师标准>>> Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www ...
jQuery File Upload文件上传
最近在写单文件上传,用jQuery File Upload踩了好多坑,但终于实现了单文件,通过按钮提交. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
jquery PHP大文件上传,Jquery和BigFileUpload实现大文件上传及进度条显示
实现方法:用到了高山来客的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, ...
Java发送form-data请求实现文件上传
如何使用Java发送form-data格式的请求上传multipart文件? 封装了以下工具类: package com.leeyaonan.clinkz.common.util;import jav ...

flask(九)----jquery请求实现文件上传与访问

flask(九)----jquery请求实现文件上传与访问相关推荐

最新文章

热门文章