自学 Flask 系列（二）通过ajax实现图片上传并插入到当前页面指定位置

最新推荐文章于 2022-12-21 15:13:09 发布

sage_wang

最新推荐文章于 2022-12-21 15:13:09 发布

阅读量3.6k

点赞数

分类专栏：自学Flask 文章标签： python flask

本文链接：https://blog.csdn.net/sage_wang/article/details/108762516

版权

自学Flask 专栏收录该内容

5 篇文章 8 订阅

订阅专栏

本文是自学Flask系列的第二部分，主要介绍如何通过AJAX实现图片上传，并将上传的图片插入到当前页面指定位置。内容包括文件目录设置、界面编辑、主程序修改及运行结果展示。

摘要由CSDN通过智能技术生成

一、前言

上一节介绍了自学 Flask 系列（一）实现文件上传，这次我们更加深入的学习如何使用ajax实现图片上传并插入到当前页面指定位置。

二、具体实现

2.1 文件目录

$ tree
.
├── index.py
├── static
│   └── upload
│       └── 20200923215339738699.png
└── templates
    └── index.html

3 directories, 3 files

2.2 相关文件

1、首先创建保存上传图片的目录

mkdir -p static/upload

2、编辑界面

vi index.html

document.getElementById(‘img1’).innerHTML=data 这里可以指定当前界面的任意位置哈。

<!DOCTYPE html> 
<html>
    <head>
        <title>首页</title>
    </head>
    <body>
    <div id="box">
        <form id="uploadForm" enctype="multipart/form-data" >
            <input type="file" name="file">
            <input type="button" value="上传" id="upFileBtn">
        </form>
    </div>
    <div id="img1" style="height:25%;width:25%;"></div>

    </body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>

    <script type="text/javascript">
        $('#upFileBtn').click(function () {
            var formFile = new FormData($('#uploadForm')[0])
		     $.ajax({
                url:"/up_file",
                type:"POST",
                data:formFile,
                processData:false,
                contentType:false,
                success: function (data) {
                    document.getElementById('img1').innerHTML=data
                }
             })
        })
    </script>
</html>

3、编辑主程序

vi index.py

#-*-coding:utf-8-*-
from flask import Flask,render_template,request
from flask_uploads import configure_uploads,UploadSet
import os,base64
import time, datetime

app = Flask(__name__)

#配置上传文件存放路径
base=os.path.dirname(os.path.abspath(__file__))
base = os.path.join(base,'static')
app.config['UPLOADS_DEFAULT_DEST']=base
photo=UploadSet()
configure_uploads(app,photo)

@app.route('/up_file', methods=['GET', 'POST'])#接受并存储文件
def up_file():
    print(request.files)
    if request.method == "POST" and 'file' in request.files:
    	# 接收图片 一般不直接保存
        # filename = photo.save(request.files['file'])
        # file_url = photo.url(filename)
        # print(filename) # flask.jpeg
        # print(file_url) # http://127.0.0.1:5000/_uploads/files/flask.jpeg

        f = request.files['file']
        # 重命名图片
        basedir = os.path.abspath(os.path.dirname(__file__))
        print("basedir : ",basedir)
        
        ftime = datetime.datetime.now().strftime('%Y%m%d%H%M%S%f')
        ext = os.path.splitext(f.filename)[1]
        upload_path = os.path.join(basedir, 'static', 'upload', ftime + ext)
        #保存图片到本地目录 ./static/upload/
        f.save(upload_path)

		#发送图片
        img = open(upload_path, 'rb')#读取图片文件
        data = base64.b64encode(img.read()).decode()#进行base64编码
        html = '''<img src="https://img-blog.csdnimg.cn/2022010619210966421.png" style="width:100%;height:100%;"/>'''#html代码
        htmlstr = html.format(data)#添加数据
        return htmlstr
        
@app.route('/',methods=['get','post'])
def index():
    return render_template('index.html')

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

三、运行结果

python index.py

 * Serving Flask app "index" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [23/Sep/2020 21:53:34] "GET / HTTP/1.1" 200 -
ImmutableMultiDict([('file', <FileStorage: '0923_2.png' ('image/png')>)])
basedir :  /data/Projects/OSSR/upload/1
127.0.0.1 - - [23/Sep/2020 21:53:39] "POST /up_file HTTP/1.1" 200 -

结果如下
flask