大文件分组上传以及进度条

最新推荐文章于 2020-02-12 16:18:22 发布

百雨

最新推荐文章于 2020-02-12 16:18:22 发布

阅读量676

点赞数 2

分类专栏：后端

本文链接：https://blog.csdn.net/sinat_38068807/article/details/100693995

版权

（一）环境与页面预览

python3.6

django2.2.4

WebUploader文件上传组件：http://fex.baidu.com/webuploader/

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件

预览：

（二）前端index.html代码部分（二选一）

1、前端选择文件后自动上传的完整代码，不用点击开始上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <!--引入CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.css">
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.css">

<!--引入JS-->
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns" >
        <div id="picker" style="margin:100px  auto 20px;text-align: center">选择文件</div>
        <button id="ctlBtn" class="btn btn-default" style="display:block;margin:0 auto 20px;text-align: center">开始上传</button>
    </div>
    <div class="progress" style="margin:0 auto;width: 600px;">         <!-- 进度条 -->
            <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;"></div>
    </div>
</div>
 <script type="text/javascript"&g

最低0.47元/天解锁文章

百雨

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
大文件分组上传以及进度条

（一）环境与页面预览python3.6django2.2.4WebUploader文件上传组件：http://fex.baidu.com/webuploader/WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件预览：（二）前端index.html代码部分（二选一）1、前端选择文件后自动上...
复制链接

扫一扫