环境

python 3.6 你换成其他3x的版本也没关系

flask

项目很小，主要是演示一下使用flask接收页面上传的文件的方法。项目包含一个批量示范页面。

演示页面文件，为了方便演示。我把html，css和js写在一起了

演示页面 demo.html

body {

font-size: 14px;

}

.my_div {

min-height: 400px;

background-color: #f7f7f7;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.my_div .json_div {

min-width: 100%;

padding: 10px;

}

.my_div .json_div >.json_div_inner {

min-width: 100%;

min-height: 50px;

border: 1px solid #d3d3d3;

border-radius: 5px;

padding: 10px;

}

.my_div .json_div >.json_div_inner >li {

margin-left: 20px;

}

.my_div #my_progress {

width: 96%;

position: relative;

}

.my_div #my_progress >.my_per {

color: #ff7d7f;

position: absolute;

display: block;

width: 4em;

top: 1px;

left: 50%;

}

.my_div .my_bottom {

padding: 10px 10px 20px;

}

.my_div .my_bottom >#select_image {

display: none;

}

批量上传演示页

function upload_progress(event, progress_cb){

/*

上传进度处理函数

:params event: 文件上传事的事件,

:params progress_cb: 回调函数,本函数会把上传完成的百分数当作地一个参数传入此回调函数.

默认情况下.会在控制台打印上传完成度. 注意,100并不代表服务端完整的接收到了文件.

只代表页面已经发送完了所有的文件内容.

*/

if (event.lengthComputable) {

var complete_percent = Math.round(event.loaded * 100 / event.total);

var handler = progress_cb?progress_cb: function(num){console.log(`上传完成度:${num}`)};

handler(complete_percent);

}else{}

}

function upload_complete(event, success_cb){

/*

上传文件success时的事件,只要服务器返回状态码200,就会执行本函数,并并不是代表服务器返回了正确的信息.

根据实际需要可以覆盖.

:params event: 文件上传事的事件,一般由XMLHttpRequest的upload的事件监听器来传递事件.

:params success_cb: 成功时的回调函数,

:return: nothing

*/

let str = event.target.responseText;

let handler = success_cb? success_cb: function(a){console.log(a);};

handler(str);

}

function upload_error(event, error_cb){

/*

上传文件失败时的事件,根据实际需要可以覆盖.

:params event: 文件上传事的事件,一般由XMLHttpRequest的upload的事件监听器来传递事件.

:params error_cb: 失败时的回调函数,

:return: nothing

*/

let handler = error_cb? error_cb: function(a){console.log(event);};

handler(event);

}

function batch_upload(options){

/*

批量上传文件. 不限制文件大小

options = {

files: 数据的序列,

url: str,

headers: 键值对对象,

success_cb: function,

error_cb: function,

progress_cb: function,

}

:params files: input标签的files

:params url: 上传的服务器url

:params headers: 放入header的参数,是键值对形式的字典,键名不要用下划线,因为那不符合规范

:params success_cb: 成功时的回调函数,会把服务器的返回信息作为第一个参数传入此回调函数.

:params error_cb: 失败时的回调函数,会把错误信息作为第一个参数传入此回调函数.

:params progress_cb: 上传时的返回上传进度的回调函数,会把页面上传文件的百分书作为第一个参数传入此回调函数..

:return: 不返回数据,由回调函数返回.

有关XMLHttpRequest对象的详细信息,请参考.

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

有关XMLHttpRequest.send方法的详细文档地址:

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send

*/

let files = options['files'];

let file_data = options['file_data'];

let url = options['url'];

let headers = options['headers'];

let success_cb = options['success_cb'];

let error_cb = options['error_cb'];

let progress_cb = options['progress_cb'];

let prog_func = function(event){upload_progress(event, progress_cb)}; // 进度的回调函数

let comp_func = function(event){upload_complete(event, success_cb)}; // 成功时的回调函数

let erro_func = function(event){upload_error(event, error_cb)}; // 失败时的回调函数

// 构造数据容器

let data = new FormData();

for(let file of files){

data.append(file.name, file);

}

// 新建一个请求对象

let req = new XMLHttpRequest();

// 添加事件监听器

req.upload.addEventListener("progress", prog_func, false);

req.addEventListener("load", comp_func, false);

req.addEventListener("error", erro_func, false);

req.addEventListener("abort", erro_func, false);

req.open("post", url);

// 必须在open之后才能给请求头赋值

if(headers){

/*

* 传送请求头信息,目前服务端还未做对应的处理.这只是与被给后来使用的.

* */

for(let k in headers){

req.setRequestHeader(k, headers[k]);

}

}

try{

req.send(data); // 404错误会直接在此抛出

}catch(e){

let handler = error_cb? error_cb: function(ms){console.log(ms);};

handler(e);

}

}

/*扩展函数注册区域*/

$.extend({

batch_upload: batch_upload // 批量上传文件，无尺寸限制

});

// 点击选择按钮的事件

$("#select_btn").click(function(){

$("#select_image").click();

});

let progress = function(per){

// 处理上传进度

console.log(`per is ${per}`);

$("#my_progress>.progress-bar").attr("style", `width: ${per}%;`).attr("aria-valuenow", `${per}`);

if(per > 52){

$(".my_per").css("color", "#fff");

}

$(".my_per").text(`${per}%`);

};

// 上传图片按钮事件

$("#select_image").change(function(){

let ul = $(".json_div_inner:first");

ul.empty();

let files = this.files;

for(let f of files){

ul.append(`

${f.name}`);

}

});

let call_back = function(){

$("#upload_btn, #select_btn").attr("disabled", false).removeClass("disabled");

alert("操作结束!");

};

// 上传图片模态框,提交按钮事件

$("#upload_btn").click(function(){

let $obj = $("#select_image");

let files = $obj[0].files;

let opts = {

"url": "/file/save",

"files": files,

"success_cb": call_back,

"error_cb": call_back,

"progress_cb": progress

};

$("#upload_btn, #select_btn").attr("disabled", true).addClass("disabled");

$.batch_upload(opts);

});

服务端的文件也很简单 server.py

# -*- coding: utf-8 -*-

from flask import Flask

from flask import render_template

from flask import request

import json

import os

app = Flask(__name__)

port = 7002

root_dir = os.path.dirname(os.path.realpath(__file__))

resource_dir = os.path.join(root_dir, 'resource')

@app.route("/")

def upload_demo():

"""上传页面"""

return render_template("upload_demo.html", page_title="批量上传")

@app.route("/file/", methods=['post', 'get'])

def file_func(action):

"""

:param action: 动作, save/get(保存/获取)

:return:

"""

mes = {"message": "success"}

if action == "save":

"""保存文件"""

if os.path.exists(resource_dir):

pass

else:

os.makedirs(resource_dir)

for key_name, file_storage in request.files.items():

if file_storage is not None:

file_name = file_storage.filename

file_storage.save(os.path.join(resource_dir, file_name))

file_storage.close()

elif action == "get":

"""获取文件/图片,未实现"""

pass

return json.dumps(mes)

if __name__ == '__main__':

app.run(host="0.0.0.0", port=port, debug=True, threaded=True)

项目的目录结构也很简单。

2018-09-27 15-40-54屏幕截图.png