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

本章我们介绍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 + "&timestamp=" + 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-sqlalchemy-web

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

(0)

相关推荐

  • Flask入门之上传文件到服务器的方法示例

    今天要做一个简单的页面,可以实现将文件 上传到服务器(保存在指定文件夹) #Sample.py # coding:utf-8 from flask import Flask,render_template,request,redirect,url_for from werkzeug.utils import secure_filename import os app = Flask(__name__) @app.route('/upload', methods=['POST', 'GET'])

  • Python使用Flask框架同时上传多个文件的方法

    本文实例讲述了Python使用Flask框架同时上传多个文件的方法,分享给大家供大家参考.具体如下: 下面的演示代码带有详细的html页面和python代码 import os # We'll render HTML templates and access data sent by POST # using the request object from flask. Redirect and url_for # will be used to redirect the user once t

  • Flask实现图片的上传、下载及展示示例代码

    用Flask处理图片非常容易,这一篇学习一下图片的上传.下载及展示.还是以实例代码演示为主. 首先,实现一个简单的上传(过程中未做任何处理,只是为了演示) 点击选择图片,输入李四: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • flask入门之文件上传与邮件发送示例

    文件上传邮件发送 一.原生文件上传 form.html <img src="{{ url_for('static',filename='img/17.jpg') }}" width="300" alt=""> <form action="" method="post" enctype="multipart/form-data"> <p>修改头像 <

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

    本章我们介绍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 req

  • 使用Web Uploader实现多文件上传

    引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu

  • asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)

    在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作.在目前Web开发中用的比较多的,可能uploadify(参考http://www.uploadify.com/)也算一个吧,不过这个版本一直在变化,他们的脚本调用也有很大的不同,甚至调用及参数都一直在变化,很早的时候,那个Flash的按钮文字还没法变化,本篇随笔主要根据项目实际,介绍一下3.1版本的uploadify的控件使用,这版本目前还是最新的

  • 文件上传八大法-远程控制必看

    本文是居于已经得到了一个有一定权限的SHELL.命令行下传送文件的其他方法. 一,TFTP 格式:tftp -i get file.exe path/file.exe           默认存放在system32下,如果指定就存在指定的地方. 二:ftp下载文件 ftp下载文件一般步骤如下: echo open xxx.xxx.xxx.xxx 〉ftp.txt echo user 〉〉ftp.txt echo password 〉〉ftp.txt echo binary 〉〉ftp.txt [

  • JavaEE组件commons-fileupload实现文件上传、下载

    一.文件上传概述 实现Web开发中的文件上传功能,需要两步操作: 1.在Web页面中添加上传输入项 <form action="#" method="post" enctype="multipart/form-data"> <input type="file" name="filename1"/><br> <input type="file" n

  • JavaWeb实现文件上传与下载的方法

    文件上传概述 实现web开发中的文件上传功能,需完成如下二步操作: 在web页面中添加上传输入项 在servlet中读取上传文件的数据,并保存到本地硬盘中. 如何在web页面中添加上传输入项? <input type="file">标签用于在web页面中添加文件上传输入项,设置文件上传输入项时须注意: 1.必须要设置input输入项的name属性,否则浏览器将不会发送上传文件的数据. 2.必须把form的enctype属值设为multipart/form-data.设置该值

  • JavaWeb实现文件上传下载功能实例解析

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,stru

  • JavaWeb实现文件上传下载功能实例详解

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 文件上传概述 1.文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2.文件上传对页面的要求 上传文件的要求比较多,需要记一下: 必须使用表单,而不能是超链接 表单的method必须是POST,而不能是GET 表单的enctype必须是multipart/form-data 在表单中添加file表单字段,即<input ty

  • JavaWeb文件上传下载功能示例解析

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 1. 上传简单示例 Jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&g

随机推荐