jQuery.filer文件上传插件简单使用

最新推荐文章于 2023-07-26 14:47:16 发布

曲草

最新推荐文章于 2023-07-26 14:47:16 发布

阅读量1.6k

点赞数

分类专栏： web 文章标签： jquery filer python flask web upload

本文链接：https://blog.csdn.net/HelloWorld1108/article/details/100773708

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

官网文档

这里贴出使用该插件上传多图片的demo，后端使用python flask。

demo

在这里插入图片描述

前端

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery.filer Demo</title>
    <link href="../static/jQuery_filer/css/jquery.filer.css" type="text/css" rel="stylesheet"/>
    <link href="../static/jQuery_filer/css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet"/>
    <link href="../static/jQuery_filer/css/custom.css" type="text/css" rel="stylesheet"/>
    <script src="../static/jQuery_filer/js/jquery.min.js"></script>
    <script src="../static/jQuery_filer/js/jquery.filer.min.js"></script>
    <style type="text/css">
        .loader {
            border: 4px solid #c5c5c5;
            border-radius: 50%;
            border-top: 4px solid #27ae60;
            width: 25px;
            height: 25px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .msg {
            margin-top: 5px;
            color: #FF5722;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div>
    <h1> demo</h1>
    <form action="" method="POST" enctype="multipart/form-data" style="display: flex;">
        <input type="file" name="file" id="filer_input" multiple="multiple">
        <input type="button" class="btn-custom green" value="Submit" id="upJQuery"
               style="height: 35px;margin-left: 10px;margin-right: 5px;">
        <div id="loading"></div> <!-- loading 效果，点击submit时出现，后代返回后loading结束... -->
        <div id="message">  <!-- 用于显示上传之后要显示的提示信息，例如错误信息等... -->
        </div>
    </form>

</div>

<script>
    $(document).ready(function () {
        $('#filer_input').filer({
            limit: 2, // 文件数量限制
            maxSize: 5, // 文件大小限制MB
            extensions: ["jpg", "png", "gif"], // 文件扩展名限制
            showThumbs: true // 是否显示浏览的图片信息
        }); // 配置filer

        $('#upJQuery').on('click', function () {
        	// 使用FormData进行文件上传
            var fd = new FormData();
            files = $("#filer_input").get(0).files;
            fd.append("file", files[0]);
            fd.append("file", files[1]);
            $("#loading").addClass('loader');
            $.ajax({
                url: "/", // flask后端路由
                type: "POST",
                processData: false,
                contentType: false,
                data: fd, // form数据
                success: function (d) {
                    $("#loading").removeClass('loader');
                    data = $.parseJSON(d).data;
                    if (data) {
                        alert(data);
                    }
                    else {
                        alert($.parseJSON(d).error);
                    }
                }
            });
        });
    });
</script>
</body>
</html>

后端

app.py

from flask import Flask, render_template, request, jsonify
from werkzeug.utils import secure_filename
import os
import time
from datetime import timedelta
import sys
import json

ALLOWED_EXTENSIONS = set(['png', 'jpg', 'JPG', 'PNG', 'bmp'])

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

app = Flask(__name__)
app.send_file_max_age_default = timedelta(seconds=1)

@app.route('/', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        upload_files = request.files.getlist('file')
        faces = []
        if len(upload_files) < 2:
            return json.dumps({"error": "images number less than two"}, ensure_ascii=False)
        for f in upload_files:
            if not (f and allowed_file(f.filename)):
                return jsonify({"error": 1001,
                                "msg": "please select an image or check the image type (allowed types: png,PNG,jpg,JPG,bmp)"})

            basepath = os.path.dirname(__file__)

            image_name = ''.join(str(uuid.uuid1()).split('-'))
            upload_path = os.path.join(basepath, 'static/images',
                                       secure_filename(image_name + f.filename[f.filename.rindex('.'):]))
            f.save(upload_path)
            
        return json.dumps({"data": "upload success! "}, ensure_ascii=False)

    return render_template('demo.html')


if __name__ == '__main__':
    app.run()

demo文档结构

./
├── app.py
├── static
│ ├── images
│ │ ├── f5202ad2d20211e99301144f8a3b4854.jpg
│ └── jQuery_filer
│ ├── css
│ …
│ ├── js
│ …
├── templates
│ └── demo.html