Flask 实现图片上传下载 (Ajax)

Flask 图片上传下载相关代码片段,多种方法,包括限制文件格式,大小等。

实现图片文件上传

# name: 简单的实现文件上传任务.
import os
from flask import Flask, request, url_for, send_from_directory
from werkzeug import secure_filename

ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = "static/"               # 将文件上传到static目录
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024   # 限制只能上传16M的文件

html = '''
    <!DOCTYPE html>
    <form method=post enctype=multipart/form-data>
         <input type=file name=file>
         <input type=submit value=上传文件>
    </form>
    '''

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],filename)

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            file_url = url_for('uploaded_file', filename=filename)
            return html + '<br><img src=' + file_url + '>'
    return html

if __name__ == '__main__':
    app.run()
# name: 通过使用flask_uploads插件完成快速上传
import os
from flask import Flask, request
from flask_uploads import UploadSet, configure_uploads, IMAGES,patch_request_class

app = Flask(__name__)
app.config['UPLOADED_FILE_DEST'] = "static/"   # 上传文件后的存储位置
patch_request_class(app, 32 * 1024 * 1024)      # 限制最大上传为32M
# UploadSet=允许上传的格式可配置为 All + TEXT + DOCUMENTS + IMAGES + DATA
photos = UploadSet('file', IMAGES)
configure_uploads(app, photos)
html = '''
    <!DOCTYPE html>
    <form method=post enctype=multipart/form-data>
         <input type=file name=photo>
         <input type=submit value=上传>
    </form>
    '''

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST' and 'photo' in request.files:
        filename = photos.save(request.files['photo'])
        file_url = photos.url(filename)  # 得到文件的路径
        return html + '<br><img src=' + file_url + '>'
    return html

if __name__ == '__main__':
    app.run()
<!--name: index.html 通过模板生成上传-->
<!DOCTYPE html>
<form method="POST" enctype="multipart/form-data">
     {{ form.hidden_tag() }}
     {{ form.photo }}
     {% for error in form.photo.errors %}
         <span style="color: red;">{{ error }}</span>
     {% endfor %}
     {{ form.submit }}
</form>

{% if file_url %}
<br><img src="{{ file_url }}">
{% endif %}

# name: app.py 通过使用WTF表单完成上传.
import os
from flask import Flask, render_template
from flask_uploads import UploadSet, configure_uploads, IMAGES, patch_request_class
from flask_wtf import FlaskForm
from flask_wtf.file import FileField, FileRequired, FileAllowed
from wtforms import SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'My Name Lyshark'
app.config['UPLOADED_PHOTOS_DEST'] = "static/"

photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)
patch_request_class(app)  # 设置最大上传大小,默认16M

class UploadForm(FlaskForm):
    photo = FileField(validators=[
        FileAllowed(photos, u'只能上传图片!'),
        FileRequired(u'文件未选择!')])
    submit = SubmitField(u'上传')

# 列出所有文件
#{% for i in filename %}
#    {{ i }}
#{% endfor %}
@app.route("/list",methods=['GET'])
def ListFile():
    filename = os.listdir(app.config['UPLOADED_PHOTOS_DEST'])
    return render_template('login.html', filename=filename)

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    form = UploadForm()
    if form.validate_on_submit():
        filename = photos.save(form.photo.data)
        file_url = photos.url(filename)
    else:
        file_url = None
    return render_template('index.html', form=form, file_url=file_url)

if __name__ == '__main__':
    app.run()

实现上传文件并重命名

<!--name: upload.html 上传文件-->
<script type="text/javascript">
    function CheckFileType(filename)
    {
        var flag = false;
        var arry = ["bmp","jpg"];
        var index = filename.lastIndexOf(".");
        var ext = filename.substr(index+1);
        for(var i=0;i<arry.length;i++)
        {
            if(ext == arry[i])
            {
                flag=true;
                break;
            }
        }
        if(!flag){alert('错误,文件名后缀不合法!');}
    }
</script>

<body>
    <form action="/upload" enctype="multipart/form-data" method="post">
        <input type="file" name="file" onchange="CheckFileType(this.value)">
        <input type="submit" value="上传文件">
    </form>
    <p style="color: green">状态: {{ file_flage }}</p>
</body>
# name: app.py
from flask import Flask,render_template,request
import os,uuid

app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 3000000   # 限制文件上传最大为3MB

@app.route("/upload",methods=['GET','POST'])
def upload_file():
    if request.method == "GET":
        return render_template("upload.html")
    elif request.method == "POST":
        file = request.files["file"]
        filename = str(file.filename)
        if len(filename) >= 20:          # 限制文件名的长度必须在20个字符以内
            return render_template("upload.html",file_flage="文件名长度超出了限制!")
        else:
            if filename.find(".") >= 0:  # 查找文件中是否包含点这个字符
                filetype = file.filename.split(".")[1]     # 取出文件类型,后期做判断
                if filetype != None and filetype == "bmp": # 后缀格式必须是bmp结尾
                    uid = uuid.uuid4()                     # 生成随机名称
                    save_file_name = str(uid) + "." + filetype  # 拼接名称
                    file.save(save_file_name)                   # 保存文件
                    return render_template("upload.html",file_flage="文件上传成功 {}".format(save_file_name))
            else:
                return render_template("upload.html",file_flage="没有选择文件,或不是图片格式,上传失败!")
    return render_template("upload.html",file_flage="文件上传失败,未知错误!")

if __name__ == '__main__':
    app.run()

实现文件下载功能

<!--name download.html-->
<script type="text/javascript">
    function Download(filename)
    {
        if(filename){window.location.href='/download/?path=' + filename}
    }
</script>
<body>
    <form action="/download" enctype="multipart/form-data" method="get">
        <input type="text" name="down" onchange="Download(this.value)"/>
        <input type="submit" value="下载文件" >
    </form>
</body>
# name: app.py
from flask import Flask, render_template, request, Response
app = Flask(__name__)

@app.route('/download/', methods=['GET', 'POST'])
def download_file():
    if request.method == 'GET':
        args = request.args.get("path").replace("/","").replace("\","")
        args = args.replace("<>","").replace("<!--","")
        args = "./templates/" + args
        print("下载的文件: {}".format(args))
        def send_file():
            store_path = args
            with open(store_path, 'rb') as targetfile:
                while 1:
                    data = targetfile.read(10 * 1024 * 1024)   # 每次读取10M
                    if not data:
                        break
                    yield data
        response = Response(send_file(), content_type='application/octet-stream')
        response.headers["Content-disposition"] = 'attachment; filename=%s'%args.split("/")[2]  # 取出下载的名字
        return response

if __name__ == '__main__':
    app.run()

ajax前端发送普通数据:

<body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function SendAjax(){
            $.ajax({
                url:"/dataFromAjax",
                contentType: "POST",
                data:{"head":"hello lyshark"},
                success:function(data){
                    if(data=="1"){
                        alert("请求已经提交.");
                    }
                },
                error:function(){
                     alert("执行失败了...")
                }
            });
        }
    </script>
    <form action="/dataFromAjax" method="post">
        <input type="button" value="发送数据" onclick="SendAjax()">
    </form>
</body>
from flask import Flask,render_template,request
app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dataFromAjax",methods=['GET'])
def recv():
    data = request.args.get("head")
    if(data==""):
        return "0"
    else:
        print("收到客户{} ".format(data))
        return "1"

if __name__ == '__main__':
    app.run()

ajax前端发送JSON数据:

<body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function SendAjax(){
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();
            $.ajax({
                url:"./dataFromAjax",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify({"username":username,"password":password}),
                success:function(result){
                    alert("执行成功...");
                },
                error:function(){
                     alert("执行失败了...");
                }
            });
        }
    </script>
    <form action="/dataFromAjax" method="post">
        用户账号: <input type="text" placeholder="用户账号" name="username" /><br><br>
        用户密码: <input type="text" placeholder="用户密码" name="password" /><br><br>
        <input type="button" value="发送数据" onclick="SendAjax()">
    </form>
</body>
from flask import Flask,render_template,request
from flask import jsonify
import json

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dataFromAjax",methods=['POST'])
def recv():
    data = request.get_data()
    json_data = json.loads(data)
    print(json_data)
    username = json_data.get("username")
    print(username)
    return  render_template("index.html")

if __name__ == '__main__':
    app.run()

ajax前端发送数据并携带token

<body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function SendAjax(){
            var token = $('input[name="token"]').val();
            $.ajax({
                url:"./dataFromAjax",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                headers:{"Authorization":token},   <!--此处携带token-->
                success:function(result){
                    alert("执行成功...");
                },
                error:function(){
                     alert("执行失败了...");
                }
            });
        }
    </script>
    <form action="/dataFromAjax" method="post">
        设置token: <input type="text" placeholder="用户账号" name="token" /><br>
        <input type="button" value="发送数据" onclick="SendAjax()">
    </form>
</body>
from flask import Flask,render_template,request
import json

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")
@app.route("/dataFromAjax",methods=['POST'])
def recv():
    token = request.headers.get("Authorization")
    print(token)
    return  render_template("index.html")

if __name__ == '__main__':
    app.run()

ajax接收服务器返回数据

<body>
    <input type="button" class="MyButton" value="接收数据" onclick="GetAjax()">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function GetAjax(){
            $.ajax({
                url:"/dataFromAjax",
                contentType: "GET",
                success:function(data){
                    alert("姓名: " + data.name + "年龄: " + data.age);
                },
                error:function(){
                    alert("执行失败了...")
                }
            });
        }
    </script>
</body>
from flask import Flask,render_template,request
from flask import jsonify

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dataFromAjax",methods=["GET","POST"])
def set():
    info = dict()
    info['name'] = "lyshark"
    info['age'] = 22
    return jsonify(info)

if __name__ == '__main__':
    app.run()

版权声明: 本博客,文章与代码均为学习时整理的笔记,博客中除去明确标注有参考文献的文章,其他文章【均为原创】作品,转载请务必【添加出处】,您添加出处是我创作的动力!

警告:如果您恶意转载本人文章,则您的整站文章,将会变为我的原创作品,请相互尊重!
原文地址:https://www.cnblogs.com/LyShark/p/12107959.html