plupload 上傳插件之進度條

這個插件還是比較友好，會返回上傳的進度，只需要放在頁面即可。後端實現忽略，這兒只簡單說一下前端。

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.效果預覽

cailongbiaoyuli