基于python-flask搭建后台，HTML+CSS+JS（jQuery）写前端的web全栈开发（三）——3.1 uploadfiles上传图片到后台（显示进度）处理并返回显示

最新推荐文章于 2024-03-25 16:15:48 发布
最新推荐文章于 2024-03-25 16:15:48 发布
阅读量4.5k 收藏 21
点赞数 8
分类专栏： 小鬼逐梦 Python Flask全栈开发 文章标签： web flask uploadfiles adjax dictionary
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winerchopin/article/details/81058909
版权

    前面小编说这个项目有两个页面，一个是sketch.html定义的介绍实验室项目（包括abstract，paper，framework，code，results等）的纯前端页面；另一个则是demo.html定义的用户成果体验页面。

    通过点击在sketch.html里的按钮进入另一个页面，要怎么实现呢？

    上图是sketch.html里的页面跳转按钮！

    其定义代码在sketch.html如下：

<head>
    ……
    <h2>Demo</h2>
    <dd></dd>
    <dd>
        Click <a href="{{ url_for('gotoDemo') }}" style="border: #FF8104 solid 1px; border-radius: 15px; color: #FF8014; text-decoration: none; padding-left: 15px; padding-right: 15px;">here</a> to have a join!
     </dd>
    ……
</head>

    注意，这里我们并不是一个真正的<input type="button"/>按钮，而是一个<a/>链接。通过对 href 的定义，在“{{ url_for('函数名称') }}”来将其绑定到后台sketch.py的一个有着相同函数名的函数上！

    后台的代码如下

@app.route('/sketch/demo')
def gotoDemo():
    return render_template('demo.html')

    这里要注意的有两点：

        1）路由的设置，是区别于其他已定义路由的，因为一个页面对应惟一一个路由（注、；路由的设置必须以‘/’开头）；

        2）后台函数返回我们希望看到的新的html页面。

 

步入正题：

    首先为大家展示一下我们的demo页面组成，其中主要的是

        1）“left”：用来展示选中的处理前的图片；

        2）“right”：用来展示对应的处理后的图片；

        3）“select image”：点击它就会调出windows的文件选择窗口；当我们选中图片后，选中的文件就会自动上传了！这一点很重要，换句话说，submit按钮是没有用途的，但实际应用中我们需要这么一个按钮来帮助我们完善一个完整的用户体验；

        4）介于image串口和select按钮之间的灰色长条，就是我们的进度条了！

1. 使用大神的插件

    网址是：https://github.com/blueimp/jQuery-File-Upload

    这是一个灰常灰常经典而实用的插件了，我们需要下载整个工程，但这里小编仅是使用最简单的版本

    其中我们需要的只是以下几个文件：

        ① jQuery-File-Upload-master\css\jquery.fileupload.css

        ② jQuery-File-Upload-master\css\style.css

        ③ jQuery-File-Upload-master\js\jquery.iframe-transport.js

        ④ jQuery-File-Upload-master\js\jquery.fileupload.js 

        ⑤ jQuery-File-Upload-master\js\vendor\jquery.ui.widget.js

        ⑥ 额外下载jquery-min.js文件

    将其复制到对应的“static/css”或者“static/js”目录下。

    在实际应用中，我们还需要引入下面两个关于Bootstrap的链接。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2. 小白的实现

    完整的demo.html代码如下

<!-- demo.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery.fileupload.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/demo.css') }}">
	<!-- 这个是我额外自己添加的.css文件 -->

</head>
    <body>
    <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
	<!-- 这里我下载的是jquery-3.2.1.min.js -->
    <script src="{{ url_for('static', filename='js/vendor/jquery.ui.widget.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery.iframe-transport.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery.fileupload.js') }}"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
    <!-- the title bar 标题 -->
    <h1 style="padding-left: 30px; padding-right: 30px; padding-top: 15px; padding-bottom: 15px;">
        <b>Sketch Simplification</b>
    </h1>
	
    <dd></dd>
    <br/><br/>
    <!-- the image windows 图片窗口 -->
    <div>
        <img src="" id="left" name="left" style="padding: 10px; width: 50%; float: left; border: #f48401 solid 1px;"/>
        <img src="" id="right" name="right" style="padding: 10px; width: 50%; border: #f48401 solid 1px;"/>
    </div>
    <br/>
	
    <!-- the process bar 进度条 -->
    <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success" style="background-color: #f48401;"></div>
    </div>
    
    <!-- the two buttons 两个按钮-->
    <div>
        <span class="btn btn-success fileinput-button" style="background-color: #f48401; border: none">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Select images...</span>
            <input id="fileupload" type="file" name="files[]" multiple accept="image/png, image/jpg, image/jpeg">
        </span>	<!-- 选择（并上传）按钮 -->
		
        <input type="button"
               style="color: white;
                font-size: 15px;
                background-color: #ffaf53;
                border-radius: 8px;
                padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px;
                border: none;"
               id="submit";
               value="Submit">	<!-- 提交按钮 -->
    </div>
    

    <script type="text/javascript">
        $(function () {		// 标准写法，表示包含在function(){}之内的函数和变量都必须是在页面完全加载完毕后才发挥作用
            'use strict';	// 标准写法，JS的格式要求
			
			
            var url = 'http://127.0.0.1:5000/sketch/upload';	
	    // ** 自定义一个新的url，我们假设有一个潜藏的页面叫作‘http://127.0.0.1:5000/sketch/upload’
	    // ** 我们希望在那个虚拟的地方进行与后台的数据交换，
	    // ** 因此，我们后台的对应函数的路由应该设置为“ @app.route('/sketch/upload') ”
			
	    // ** 下面我们打算构建一组东西，是给file按钮准备的，
	    // *  包括了：fileupload，prop，
	    // *  第一部分的fileupload包括了：url, 信息交互的数据类型，done，progressall
            $('#fileupload').fileupload({
                url: url,
                dataType: 'json',// 数据交互的类型
				
		// done表示当接收到后端反馈的信息是要做的动作
                done: function (e, data) {
                    var filepath = "", filepath_ = "";
                    $.each(data.result.files, function (index, file) {
                        $('<p style="display: none"/>').text(file.name).appendTo(document.body);
                        filepath = file.filepath;
                        filepath_ = file.filepath_;
                    });
                    $('#left').attr('src', '../' + filepath);
                    $('#right').attr('src', '../' + filepath_);

                },// 这一部分小编会结合后端的函数一起讲解
				
		// progressall表示在选择好文件后上传文件过程中要做的动作
                progressall: function (e, data) {
		    // 显然这是对进度条做宽度变化
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                        'width',
                        progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');
            
        });
    </script>
    </body>
</html>

    这里还希望大伙们理解，把部分css代码和js代码杂糅进来了，因为写的有些匆忙敲打。下面我们着重讲解一下js那部分接收代码！

    正如小编前面提到的，当我们确定选择的图片后，文件就已经上传了，所以在提交按钮的js函数里才会有一个done的函数来解决“当传输完成并且顺利获得后台的反馈时采取什么样的动作”。

    我们的思路是，先在后台把获得的图片读取并暂时根据本地时间命名、保存下来，完了后我们在重新读取，进行一系列图像处理，而后再把结果暂时存储下来，最后我们只需要返回原图片和结果图片的两条路径既可，再通过JS对<img/>图片标签进行更新。

sketch.py新增的函数

@app.route('/sketch/upload', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        f = request.files['files[]']

        # print(f)
        filename = f.filename	# 获取接收到的文件名
        # print(filename)
        minetype = f.content_type# 文件类型
        # print(minetype)

        now_time = datetime.datetime.now().strftime('%Y-%m-%d_%H-%M-%S')	# 获取本地时间，进行图片重命名
        dir = 'static/temp-img/rough/' + now_time	
	# ‘static/temp-img/rough/’是我们预设置的路径，用来暂时存储原图片，于是我们构造了图片的存储路径和名字
		
        os.makedirs(dir)
        filepath = dir +"/" + now_time + "." + filename.split(".")[1]	# 但别忘记我们还需要获得图片格式（扩展名，可能是.jpg，.png等）

        f.save(filepath)	# 将文件存储下来

        img = Image.open(filepath).convert('L')	# 重新读出图片
        img_ = F(img)							# 并对齐进行某种处理，返回结果图片

        filepath_ = "static/temp-img/simplified/model_iter_39000.npz/" + now_time + "." + filename.split(".")[1]
	# ‘static/temp-img/simplified/’也是我们预设置的路径，用来暂时存储结果图片
	img_.save(filepath_)
        
	# 最后我们就可以返回对应的路径啦
        return simplejson.dumps({
            "files":
                [{
                    "name": filename,
                    "mintype": minetype,
                    "filepath": filepath,
                    "filepath_": filepath_
                }]
        })
    else:
        return render_template('demo.html')

    好了，我们发现，如果成功的话，就会把原图片和结果图片在后台的路径传回前台，那么接下来我们要做的也就是通过说“更新img的src值来迫使前端以获取html所需图片为理由更新并显示图片”！

    最后我们再来看前面那一段done的内容，就很好懂了吧！

done: function (e, data) {	// 这里的data正是后台传回的数据
    var filepath = "", filepath_ = "";
    $.each(data.result.files, function (index, file) {
		$('<p style="display: none"/>').text(file.name).appendTo(document.body);
        filepath = file.filepath;
        filepath_ = file.filepath_;
    });// 因为可能是多文件相传，但我们只选择最后一个文件的名字
	
    $('#left').attr('src', '../' + filepath);
    $('#right').attr('src', '../' + filepath_);
    // jQuery风格的 html 标签属性更新

    document.getElementById('right').style.visibility = 'hidden';
},

    最后是效果图啦，

    以及后期经过完善后，实现的效果。

总结

    至此，我们了解了基于bootstrap的文件上传，和前端与flask后端做数据交互的一种方式。

    下一篇，我们将再了解另外一中前后台交互方式！

萧班
关注
  • 8
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
python全栈开发项目模板Flask+Flask-Login+SQLAlchemy+WTForms+PyMySQL架构Demo
06-23
python全栈开发项目模板Flask+Flask-Login+SQLAlchemy+WTForms+PyMySQL架构Demo。用于快速构建自己的python全栈web应用。简单实用，代码已调试，完美运行！ python全栈开发项目模板Flask+Flask-Login+SQLAlchemy+WTForms+PyMySQL架构Demo。用于快速构建自己的python全栈web应用。简单实用，代码已调试，完美运行！ python全栈开发项目模板Flask+Flask-Login+SQLAlchemy+WTForms+PyMySQL架构Demo。用于快速构建自己的python全栈web应用。简单实用，代码已调试，完美运行！ python全栈开发项目模板Flask+Flask-Login+SQLAlchemy+WTForms+PyMySQL架构Demo。用于快速构建自己的python全栈web应用。简单实用，代码已调试，完美运行！python全栈开发项目模板Flask+Flask-Login+SQLAlchemy+WTForms+PyMySQL架构Demo。用于快速构建自己的python
前后端分离，前端: Vue.js+jquery、后端: python+flask构建企业微信打卡项目，web全栈开发
06-23
前后端分离，前端: Vue.js+jquery、后端: python+flask构建企业微信打卡项目，web全栈 使用技术 前端: Vue.js+jquery 后端: python+flask 使用方法 npm install 修改src文件中index.js文件开头的配置信息 self.host// 你自己配置的域名地址 后端文件在flask中修改wx.py中的self.key中的腾讯webserverAPIsdk 页面展示 web cookie获取 需要自己使用抓包软件去抓取cookie信息 抓包文件放到apk文件中了 更新文档 v1.3 优化代码，调整页面的细节 修改页面提示信息反馈，按钮大小的修改 移动端优化，禁止用户缩放页面，禁止左右滑动 v1.2 将详情表格信息，存储到缓冲中，方便用户查看之前的提交信息 加入清除所有缓冲的按钮 并且加入了状态提示 v1.1 加入userID本地缓冲，方便提交信息 后端接入随机地址，范围0-100米，使用腾讯JavaScriptApi webserverAPIsdk 加入详情页展示 v1.0 使用flask框架替换node.js前端请求
【flask】 flask+AJAX+html+CSS+js实现一个简单的注册登录系统
最新发布
Zimu的博客
03-25 1002
直接点击flask中文网：https://flask.github.net.cn/快 、准、狠！且全面！当然你看完也可能会有一丢丢疑惑。接着奏乐、接着看 |/
python-Flask编写一个简单的网络接口（3）--详解（超基础）图片传输
qq_44886056的博客
12-13 857
前言 这一章讲的只是一个小技巧而已，没有太多的知识内容。如果你自己百度的话也是可以查到的。话不多说。开始吧。我这次直接用案例讲吧。 （里面涉及到了一些opencv的东西，如果无法理解也不用强行理解） 实现图片上传和下传 首先，我们要想办法先拿到上传的图片 这个简单，直接调用接口就可以了 @app.route('/img/send_img', methods=['POST']) def send_img(): f = request.files['my_img'] # 拿到请求的文件中name是my_
Python flask web基础(二)做一个上传图片文件的实例
07-11 1739
最终实现上传图片成功并显示图片及提示 _head.html upload.html 2)js文件内容与后端进行数据交互upload.js 3)后端views.py实现文件保存及信息反馈 最后两个工具文件的内容:1)restful.py 2)upload.py 总结:通过以上代码最终实现上传图片成功并显示图片及提示......
python基于flask写后端实操笔记
Thomas_Cai的记忆殿堂
06-13 1841
使用POST方法，客户端可以通过请求体将数据传递给服务器，然后服务器根据请求体中的数据执行相应的操作。GET请求是幂等的，即多次相同的GET请求返回的结果应该是一样的，不应该对服务器端数据产生副作用。使用DELETE方法，客户端可以指示服务器删除指定的资源。DELETE请求应该是幂等的，即多次相同的DELETE请求对服务器端数据的状态应该是一致的，即使资源已经被删除。在基于Flask编写后端接口时，关键字GET、POST和DELETE是HTTP请求方法，用于指定客户端对服务器端资源的操作方式。
Flask+Web开发实战,flaskweb开发实战pdf,Python
09-10
Flask+Web开发实战的PDF版本。Flask是目前最流行的Python Web框架之一。自2010年开源以来，Flask受到了越来越多的Python开发者的喜欢，其受欢迎程度不输于Django。
flask html中引入js/css/html路径问题
六十英里的专栏
08-07 1万+
众所周知，html中引入js/css/html时，路径为相对本.html文件的路径。 如： <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" href="css/index.css"> <a href='test.html'> </a> <img src="ico/1.ico" alt="" > 但是当flask
实战:前端进度条显示Flask后端执行进度
01-25 879
前言:如果后端执行某个动作时间过长(例如:导入N多条数据),前端需要一个友好的反馈,实时知道执行进度.今天就用后端执行从1到10000000的平方和(我的机器执行时间大概4秒)来模拟演练。如果对你有用,拷贝代码的同时,别忘点个小赞哈^_^2)前端代码(引用的js,css等自己网上下载)话不多说,有图有源码。
前端form表单上传图片等信息，python后端接收
weixin_44373861的博客
06-05 4402
前端form表单上传图片等信息，python后端接收。 最近总需要做关于图片上传的东西。一直百度，这次想自己记录一下。 HTML代码： <form class="box" action="这里写后端接口地址" method="POST" enctype="multipart/form-data"> <div class="formbox"> <input type="file" name="img" id="file0" class="select2"
Flask: Python上传文件的功能怎么做？
白帽阿叁的博客
10-11 605
无论你是处理允许用户上传头像的社交媒体网站、管理用户文件的云存储服务，还是接收数据进行处理的企业应用程序，文件上传都是促进这些交互的基本功能。Flask是一个轻量级且灵活的Python Web框架，因其易用性和灵活性而成为开发人员的热门选择。它提供了一组强大的工具和库来处理各种任务，包括文件上传。使用Flask，你可以轻松处理上传的文件，验证它们的安全性，并将它们保存到服务器，所有这些都只需几行代码。Flask应用程序中上传的文件存储在字典中。该字典的键是HTML表单中的文件输入字段的名称，而值是实例。
基于Flask+Mysql+SQLALchmy的购物商场项目，python web全栈开发实战案例（源码+数据库）
01-06
基于Flask+Mysql+SQLALchmy的购物商场项目，python web全栈开发实战案例（源码+数据库）基于Flask+Mysql+SQLALchmy的购物商场项目，python web全栈开发实战案例（源码+数据库）基于Flask+Mysql+SQLALchmy的购物商场...
Python高校舆情分析监控系统,框架：flask+ html + css + jquery + python + TD-IDF
08-01
Python高校舆情分析监控系统 框架：flask+ html + css + jquery + python + TD-IDF,IDA,NLP算法 +mysql MySQL数据量重置id truncate table tablename python3.9 高校舆情分析监控系统 爬虫三个模块 贴吧 微博
Python高校舆情分析监控系统 框架：flask+ html + css + jquery + python + TD-IDF
08-01
Python高校舆情分析监控...框架：flask+ html + css + jquery + python + TD-IDF,IDA,NLP算法 +mysql MySQL数据量重置id truncate table tablename python3.9 高校舆情分析监控系统 爬虫三个模块 贴吧 微博 新闻
基于python-flask搭建后台，HTML+CSS+JS（jQuery）写前端的web全栈开发（二）——2.1 前端细节讲解
热门推荐
WinerChopin的博客
07-15 1万+
在正式开始之前，我想跟大家分享一下我的开发思路。    1. 首先，要有一个明确的Project的文件结构，包括文件文件夹命名、归并等。如下图是小编本次项目的结构：        （1）总的项目名称是“OLab”（Our Lab的意思）。        （2）“OLab”含有两个文件夹：“Materials”和“src”，前者是一些实验室的资料，例如开发要求、设计方案、辅助照片等，这个不用管；后者...
基于python-flask搭建后台，HTML+CSS+JS（jQuery）写前端的web全栈开发（一）
WinerChopin的博客
07-15 1万+
写在前面    因为实验室最近在开发一个网站，所以上个星期就几个人在一块，从〇开始，自学了简易的web全栈开发，也着实走了很多的弯路哈！在此以博客形式记录，谨以此分享给跟兴趣的伙伴们！也希望大伙多多指教！需要准备什么？    首先，我们务必理解：1）什么是前端；2）什么是后端！    我们举一个例子：如上图所示是百度首页！我们输入一个HTTP地址后登录一个网站，所看到的“界面，文本，图片，动画，声...
EDVR——代码调试+训练
WinerChopin的博客
07-18 8917
2019年CVPR的文章EDVR: Video Restoration with Enhanced Deformable Convolutional Networks，做的是视频处理（包括视频帧的超分辨率技术与去模糊），从结构上看能够处理应用于任意书品转换的强监督任务；文中最亮眼的地方在于他提出了保证时序一致性（temporal consistency）的新方法，不是使用光流（optical fl...
vid2vid 代码调试+训练+测试（debug+train+test）（一）测试篇
WinerChopin的博客
04-16 6901
## Prerequisites - Linux or macOS - Python 3 - NVIDIA GPU + CUDA cuDNN - PyTorch 0.4 但一般的话我们为了保护已有的环境，通常对于每一个项目新建一个虚拟环境，过程如下： """ Linux 下安装虚拟环境 """ # 升级 pip pip install --upgrade pip # 安装必要的库 sudo...
U-GAT-IT
WinerChopin的博客
08-10 6581
论文原文：U-GAT-IT: Unsupervised Generative Attentional Networks with Adaptive Layer-Instance Normalization for Image-to-Image Translation 一、解决的问题——unpaired image-to-image translation 1.Selfie2Anime ...
python-flask+mysql开发源码
05-12
Python-Flask是一个轻量级Python Web框架，它提供了许多组件和工具，方便开发人员快速构建Web应用程序。MySQL是一个流行的关系型数据库管理系统，常用于存储和管理Web应用程序的数据。 在Python-Flask中使用MySQL进行开发，我们可以选择使用MySQL官方提供的Python驱动程序或者第三方库如MySQLdb或PyMySQL。我们需要在Flask应用程序中引入这些库，并跟踪连接和游标对象以及执行SQL查询和操作，确保我们的应用程序能够正常查询和更新数据库中的数据。 在Python-Flask中使用MySQL进行开发时，我们需要考虑如何组织和结构化我们的代码以尽可能地提高代码的可读性和可维护性。我们可以考虑将数据访问和业务逻辑分开，将数据库操作封装到模型类或模块中，并将其从视图代码中分离出来。 为了提高数据库查询的效率，我们可以使用ORM(Object-Relational Mapping)工具如SQLAlchemy，将数据库表映射为Python对象，然后通过Python对象来执行数据库操作，使得我们不必直接编写SQL语句，而可以使用面向对象的方式轻松地操作数据库。 总之，使用Python-Flask和MySQL进行开发需要我们充分理解Python和MySQL的编程模型以及它们两者之间的集成方式，合理地组织和结构化我们的代码，并使用合适的工具和技术来实现我们的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值