plupload 上传插件之进度条

骑猪看日落 2021-08-10 20:40 716阅读 0赞

> 这个插件还是比较友好，会返回上传的进度，只需要放在页面即可。后端实现忽略，这儿只简单说一下前端。

## 1.html 部分 ##

<link href="/assets/css/bootstrap.mind797.css?v=3.4.0" rel="stylesheet">
    
    <label class="col-sm-1 control-label font-noraml">视频</label>
    <div class="col-sm-11 input-group">
      <input type="text" name="video" id="video" class="form-control">
      <div class="input-group-addon">
        <span id="fileUploader2" name='videoInput' class="btn btn-success btn-xs" style="margin-bottom:0px;">选择</span></div>
    </div>
    
    
    <div class="form-group">
      <label class="col-sm-1 control-label font-noraml">上传进度</label>
      <div class="col-sm-8 input-group">
        <div class="progress progress-striped active">
          <div id="percent" style="width:0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-danger">
            </div>
          <span id="percent_"></span>
        </div>
      </div>
    </div>

## 2.js部分  ##

需要jquery，bootstrap,plupload上传插件，请自行引入

<script src="<?php echo IMG_URL ?>system/js/jquery-2.1.1.min.js"></script>
    <script src="<?php echo IMG_URL ?>system/js/bootstrap.mind797.js?v=3.4.0"></script>
    <script type="text/javascript" src="<?= ADMIN_URL ?>apps/weixin/js/plupload.full.min.js"></script>
    
    <script>
    var fileUploader2 = new plupload.Uploader({
        //触发选择文件的元素
        browse_button: 'fileUploader2',
        // 服务端上传路径
        url: "/?app=zone&controller=wangpan&action=upFiles",
        flash_swf_url: '<?= ADMIN_URL ?>apps/weixin/js/Moxie.swf',
        silverlight_xap_url: '<?= ADMIN_URL ?>apps/weixin/js/Moxie.xap',
        //过滤
        filters: {
            mime_types: [{
                title: "Image files",
                extensions: "video,mp4"
            },
            ],
            //是否允许重复选择文件 false:允许
            prevent_duplicates: false,
            max_file_size: '1024mb',
        },
        //是否支持多选
        multi_selection: true,
        //唯一的文件名
        unique_names: true,
        chunk_size: 0,
        init: {
            UploadProgress: function(up, file) {
                var percent = file.percent;
                $("#percent").css('width', percent + "%");
                $("#percent_").html(percent + "%");
            },
        }
    });
    fileUploader2.init();
    //绑定一些事件,通过这些和插件进行交互
    fileUploader2.bind('FilesAdded',
    function(uploader, file) {
        fileUploader2.start();
    });
    //绑定一些事件,通过这些和插件进行交互
    fileUploader2.bind('FileUploaded',
    function(up, file, info) {
        layer.msg("上传成功");
    });
    //绑定一些事件,通过这些和插件进行交互
    fileUploader2.bind('Error',
    function(uploader, errorObject) {});
    </script>

## 3.效果预览 ##

![20190930173049425.gif][] cailongbiaoyuli

[20190930173049425.gif]: /images/20210809/80a34bbb203a4a1c8ed2dd55b62283ec.png

发表评论取消回复

表情：

评论列表（有 0 条评论，716人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 上传插件plupload

官网：[https://www.plupload.com/][https_www.plupload.com] 示例：[http://chaping.github.io/plu

布满荆棘的人生/ 2023年06月19日 12:29/ 0 赞/ 33 阅读

相关上传插件 plupload使用说明

Plupload有以下功能和特点： 1、拥有多种上传方式：HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload

桃扇骨/ 2022年07月16日 14:59/ 0 赞/ 524 阅读

相关 Plupload上传插件详解，多实例上传

我们来看一个比较全的 [Plupload][] Demo <!DOCTYPE html> <html> <head> <meta charset="UT

以你之姓@/ 2022年07月03日 12:20/ 0 赞/ 278 阅读

相关 plupload附件上传插件IE8问题

前段时间遇到一个plupload上传插件问题，在其他浏览器上面运行很正常，但是就是在IE8上面第一次点击上传按钮无反应，后面再连续点击才ok。我的初始化代码如下

向右看齐/ 2022年06月17日 04:54/ 0 赞/ 245 阅读

相关 jquery前端文件上传进度条（非插件），spring boot文件上传实时进度条，主要代码ajax

jquery前端文件上传进度条（非插件），spring boot文件上传实时进度条 > 为了更好地用户体验，我们在做文件上传时需要将文件上传的实时进度返回给浏览器进行展示

╰半夏微凉°/ 2022年04月14日 07:10/ 0 赞/ 679 阅读

相关 plupload附件上传插件IE8问题

前段时间遇到一个plupload上传插件问题，在其他浏览器上面运行很正常，但是就是在IE8上面第一次点击上传按钮无反应，后面再连续点击才ok。我的初始化代码如下

傷城~/ 2022年04月12日 12:07/ 0 赞/ 260 阅读

相关 plupload附件上传插件IE8问题

前段时间遇到一个plupload上传插件问题，在其他浏览器上面运行很正常，但是就是在IE8上面第一次点击上传按钮无反应，后面再连续点击才ok。我的初始化代码如下

小灰灰/ 2022年03月11日 13:18/ 0 赞/ 312 阅读

相关关于Plupload上传插件的使用方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8">

叁歲伎倆/ 2021年12月03日 06:57/ 0 赞/ 708 阅读

相关进度条插件

进度条插件一、NProgress 一、NProgress 使用 <link rel='sylesheet' href='nprogress.cs

╰半夏微凉°/ 2021年09月07日 06:12/ 0 赞/ 623 阅读

相关 plupload 上传插件之进度条

> 这个插件还是比较友好，会返回上传的进度，只需要放在页面即可。后端实现忽略，这儿只简单说一下前端。 1.html 部分 <link href="/assets

骑猪看日落/ 2021年08月10日 20:40/ 0 赞/ 717 阅读