Flask Web开发入门之文件上传（八）_Python

本章我们介绍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 + '"删除失败！');

									         }

									       }

									     })

									   })

									 }