这个插件还是比较友好,会返回上传的进度,只需要放在页面即可。后端实现忽略,这儿只简单说一下前端。
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.效果预览