jquery-easyui+flask单/多文件上传

一、单文件上传

        jquery easyui官网只提供了单文件上传的方式，单文件上传代码大致如下：

HTML部分

<form id="uploadFile" enctype="multipart/form-data" method="post" class="easyui-panel" title="单文件上传" style="width:400px;padding:30px 70px 50px 70px;">
	<div style="margin-bottom:20px">
		<div>文件:</div>
		<input name="file" class="easyui-filebox" data-options="prompt:'请选择文件...',buttonText:'选择'" style="width:100%">
	</div>
	<div style = "padding:5px 0px">
		<a onclick="upload();" class="easyui-linkbutton" id='upload' style="width:100%">上传</a>
	</div>
</form>

JavaScript部分

function upload() {
	var formData = new FormData($("#uploadFile")[0]); // 获取上传文件
	$.ajax({
        url: "upload.html",
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returnInfo) {
            console.log(returnInfo);
		},
        error: function (error) {
            console.log(error);
        }
    });
}

flask部分

from flask.views import MethodView
from flask import render_template, Blueprint, request, g, jsonify, send_from_directory
from werkzeug.utils import secure_filename


wl = Blueprint('wl', __name__)

ALLOWED_EXTENSIONS = {'xls', 'xlsx', 'pdf'}
def allow_file(filename):

    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


@wl.route('/upload.html', methods=['GET', 'POST'])
def upload():
    if 'file' not in request.files:

        return jsonify({'code': 1})  # 文件未上传
    file = request.files['file']  # 获取上传的文件
    if file.filename == '':

        return jsonify({'code': 1})
    if file and allow_file(file.filename):
        filename = secure_filename(''.join(lazy_pinyin(file.filename)))
        file.save(os.path.join(os.path.dirname(__file__), 'files', filename))

        return jsonify({'code': 0, 'filename': filename})  # 上传成功
    else:

        return jsonify({'code': 2})  # 文件类型（后缀名）不符合

二、多文件上传

        经过多方查找资料并借鉴其他框架的多文件上传，成功实现了jquery多文件上传的功能。

HTML部分

        在文件框的标签加上multiple，使得上传文件时可以多选文件，再加上id，方便JavaScript获取文件

<form id="uploadFile" enctype="multipart/form-data" method="post" class="easyui-panel" title="多文件上传" style="width:400px;padding:30px 70px 50px 70px;">
	<div style="margin-bottom:20px">
		<div>文件:</div>
		<input name="file" id="multiFiles" multiple class="easyui-filebox" data-options="prompt:'请选择文件...',buttonText:'选择'" style="width:100%">
	</div>
	<div style = "padding:5px 0px">
		<a onclick="upload();" class="easyui-linkbutton" id='upload' style="width:100%">上传</a>
	</div>
</form>

JavaScript部分

        先获取文件框里待上传的所有文件，创建文件类型变量，并遍历拼接文件型变量。

        单文件上传的时候，后端接收到的文件参数是{'file': 文件}，通过'file'这个key来提取对应的文件（value），多文件上传的时候，如果不改变key，后端接收到的文件参数将会是{'file': 文件1, 'file': 文件2, 'file': 文件3}，后端只能通过'file'这个key提取到一个文件；因此需要像下面这样改变使后端接收到的文件参数为{'file0': 文件1, 'file1': 文件2, 'file2': 文件3, ......}

function upload() {
	var files = $("#multiFiles").next().find('input[type="file"]')[0].files;  // 获取标签上的文件
	var formData = new FormData();  // 创建文件类型变量
    // 遍历文件列表，拼接文件类型变量，FormData()类型变量可以理解为是一个存储文件的dict
	for (var i = 0; i < files.length; i++) {
		formData.append('file' + i, files[i]);  // 'file' + i作为dict的key，files[i]是dict的value
	}
	$.ajax({
		url: "upload.html",
		type: 'POST',
		data: formData,
		async: false,
		cache: false,
		contentType: false,
		processData: false,
		success: function (returnInfo) {
			console.log(returnInfo);
		},
		error: function (error) {
			console.log(error);
		}
	});
}

flask部分

        后端request.files接收到的是一个Dict类型的变量，遍历这个变量就可以挨个获取上传的文件。

from flask.views import MethodView
from flask import render_template, Blueprint, request, g, jsonify, send_from_directory
from werkzeug.utils import secure_filename


wl = Blueprint('wl', __name__)

# 设置允许上传的文件类型（后缀）
ALLOWED_EXTENSIONS = {'xls', 'xlsx', 'pdf'}
def allow_file(filename):

    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


@wl.route('/upload.html', methods=['GET', 'POST'])
def upload():
    if not len(request.files):

        return jsonify({'code': 1})  # 文件未上传
    fns = []
    for f in request.files:  # 遍历接收到的文件
        file = request.files[f]
        if file.filename == '':

            continue
        if file and allow_file(file.filename):  # 判断文件名是否合法
            filename = secure_filename(''.join(lazy_pinyin(file.filename)))
            file.save(os.path.join(os.path.dirname(__file__), 'files', filename))  # 保存文件

            fns.append({'filename': filename, 'status': 0})  # 保存成功的文件
        else:

            fns.append({'filename': filename, 'status': 2})  # 文件名不合法的文件
    else:

        return jsonify({'code': 0, 'filename': fns})