django + simpleui + webuploader 上传文件和文件夹以及上传图片问题

置顶

weixin_40105587

于 2020-05-09 15:19:52 发布

阅读量1.5k

点赞数

分类专栏： django

本文链接：https://blog.youkuaiyun.com/weixin_40105587/article/details/106019513

版权

本文详细介绍了一种基于WebUploader的文件上传方案，包括文件分片上传、进度显示及多种文件格式的支持。通过实例代码展示了如何实现文件上传的前端逻辑，适用于大文件上传场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

附代码

{% extends 'admin/custom_change_list.html' %}
{% block extraheadupload %}
    <script src="/static/bootstrap/js/jquery.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/webuploader/webuploader.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
    <style>
        .upload{
            display: flex;
        }
        .a-upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }

        .a-upload input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }

        /* a file */
        .file {
            position: relative;
            display: inline-block;
            backgro