Flask Web开发入门之文件上传(八)


Posted in Python onAugust 17, 2018

本章我们介绍Flask Web开发中涉及的文件上传模块

定义后台接收处理逻辑

# http://flask.pocoo.org/docs/0.12/patterns/fileuploads/
@app.route('/upload', methods=['POST'])
def upload_file():
  if request.method == 'POST':
    # check if the post request has the file part
    if 'file' not in request.files:
      logger.debug('No file part')
      return jsonify({'code': -1, 'filename': '', 'msg': 'No file part'})
    file = request.files['file']
    # if user does not select file, browser also submit a empty part without filename
    if file.filename == '':
      logger.debug('No selected file')
      return jsonify({'code': -1, 'filename': '', 'msg': 'No selected file'})
    else:
      try:
        if file and allowed_file(file.filename):
          origin_file_name = file.filename
          logger.debug('filename is %s' % origin_file_name)
          # filename = secure_filename(file.filename)
          filename = origin_file_name

          if os.path.exists(UPLOAD_PATH):
            logger.debug('%s path exist' % UPLOAD_PATH)
            pass
          else:
            logger.debug('%s path not exist, do make dir' % UPLOAD_PATH)
            os.makedirs(UPLOAD_PATH)

          file.save(os.path.join(UPLOAD_PATH, filename))
          logger.debug('%s save successfully' % filename)
          return jsonify({'code': 0, 'filename': origin_file_name, 'msg': ''})
        else:
          logger.debug('%s not allowed' % file.filename)
          return jsonify({'code': -1, 'filename': '', 'msg': 'File not allowed'})
      except Exception as e:
        logger.debug('upload file exception: %s' % e)
        return jsonify({'code': -1, 'filename': '', 'msg': 'Error occurred'})
  else:
    return jsonify({'code': -1, 'filename': '', 'msg': 'Method not allowed'})

判定文件类型

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

前台页面代码

<div class="layui-inline">
      <label class="layui-form-label">上传文件</label>
 <div class="layui-input-inline">
   <input type="text" name="attach" id="upload_message" lay-verify="required" autocomplete="off"
   class="layui-input" readonly="readonly">
 </div>
</div>
<div class="layui-inline">
   <img id='img_delete' src="{{ url_for('static', filename='images/delete.png')}}" onclick="do_delete()"
     style="display: none;">
   <button type="button" class="layui-btn" id="upload"><i class="layui-icon"></i>上传文件</button>

</div>

上传按钮初始化及回调

layui.use(['upload', 'layer'], function () {
    var upload = layui.upload;
    var layer = layui.layer;
    upload.render({
      elem: '#upload'
      , url: '/upload'
      , accept: 'file'
      , exts: 'txt'
      , size: 2048
      , done: function (res) {
        console.log(res);
        if (res.code === 0) {
          layer.msg(res.filename + '上传成功');
          $("#upload_message").val(res.filename);
          $("#img_delete").show()
        } else {
          layer.alert('上传失败');
          $("#upload_message").val('上传失败!');
        }
      }
    });
})

当然允许上传,同时也应该允许对以删除文件进行删除

@app.route('/delete', methods=['GET'])
def delete_file():
  if request.method == 'GET':
    filename = request.args.get('filename')
    timestamp = request.args.get('timestamp')
    logger.debug('delete file : %s, timestamp is %s' % (filename, timestamp))
    try:
      fullfile = os.path.join(UPLOAD_PATH, filename)

      if os.path.exists(fullfile):
        os.remove(fullfile)
        logger.debug("%s removed successfully" % fullfile)
        return jsonify({'code': 0, 'msg': ''})
      else:
        return jsonify({'code': -1, 'msg': 'File not exist'})

    except Exception as e:
      logger.debug("delete file error %s" % e)
      return jsonify({'code': -1, 'msg': 'File deleted error'})

  else:
    return jsonify({'code': -1, 'msg': 'Method not allowed'})

删除按钮初始化及回调处理

function do_delete() {
    var filename = $("#upload_message").val();
    layui.use(['upload', 'layer'], function () {
      var layer = layui.layer;
      $.ajax({
        url: '/delete?filename=' + filename + "×tamp=" + new Date().getTime()
        , type: 'GET'
        , success: function (response) {
          console.log(response)
          if (response.code == 0) {
            layer.msg('"' + filename + '"删除成功!');
            $("#upload_message").val('')
            $("img_delete").hide()
          } else {
            layer.msg('"' + filename + '"删除失败!');
          }
        }
      })
    })
  }

实现效果

Flask Web开发入门之文件上传(八)

源码参考:flask-sqlalchemy-web   

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python bsddb模块操作Berkeley DB数据库介绍
Apr 08 Python
python高阶爬虫实战分析
Jul 29 Python
python实现抖音点赞功能
Apr 07 Python
python批量图片处理简单示例
Aug 06 Python
pandas的to_datetime时间转换使用及学习心得
Aug 11 Python
redis数据库及与python交互用法简单示例
Nov 01 Python
YUV转为jpg图像的实现
Dec 09 Python
如何基于python操作json文件获取内容
Dec 24 Python
关于Python turtle库使用时坐标的确定方法
Mar 19 Python
Tensorflow之MNIST CNN实现并保存、加载模型
Jun 17 Python
如何在 Matplotlib 中更改绘图背景的实现
Nov 26 Python
python 基于opencv操作摄像头
Dec 24 Python
python操作excel的方法
Aug 16 #Python
python3调用百度翻译API实现实时翻译
Aug 16 #Python
Python用于学习重要算法的模块pygorithm实例浅析
Aug 16 #Python
Python pygorithm模块用法示例【常见算法测试】
Aug 16 #Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
Aug 16 #Python
Python使用pickle模块储存对象操作示例
Aug 15 #Python
Linux下多个Python版本安装教程
Aug 15 #Python
You might like
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
Laravel 5 学习笔记
2015/03/06 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
Javascript 遍历页面text控件详解
2014/01/06 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
浅析python继承与多重继承
2018/09/13 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
安全环保演讲稿
2014/08/28 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Django使用echarts进行可视化展示的实践
2021/06/10 Python