当前位置 博文首页 > Arsenalzjx的博客：bootstrap文件上传组件bootstrap-filestyle
源码地址:
https://github.com/markusslima/bootstrap-filestyle文档地址:
http://markusslima.github.io/bootstrap-filestyle/bootstrap-filestyle是个精简实用的文件上传组件,功能比较纯粹, 使用方法相对简单
效果图:
?
引入资源,注意顺序
<head>
<link href="/asserts/bootstrap3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="/asserts/jquery.3.3.1/jquery-3.3.1.js"></script>
<script src="/asserts/bootstrap3.3.7/js/bootstrap.js"></script>
<script src="/asserts/bootstrap-filestyle-1.2.3/bootstrap-filestyle.js"></script>
</head>?html-body
<body>
<form id="submit_form" class="form-inline">
<div class="form-group" style="font-size: 20px">
<!--通过multiple属性进行多选和单选控制-->
上传:<input type="file" name="files" id="files" class="form-control" multiple>
</div>
</form>
<button onclick="fileSubmit()">提交</button>
<!--等待动画模态框-->
<div class="modal fade" id="wait_modal">
<div class="modal-dialog modal-sm">
<img alt=""
src="data:image/gif;base64,R0lGODlhGQAZAJECAK7PTQBjpv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUNGNUFGRUFGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUNGNUFGRTlGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjI1NDg2LTZkZWQtMjY0NS04MTAzLWQ3Yzg4MTg5YzExNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFCgACACwAAAAAGQAZAAACTpSPqcu9AKMUodqLpAb0+rxFnWeBIUdixwmNqRm6JLzJ38raqsGiaUXT6EqO4uIHRAYQyiHw0GxCkc7l9FdlUqWGKPX64mbFXqzxjDYWAAAh+QQFCgACACwCAAIAFQAKAAACHYyPAsuNH1SbME1ajbwra854Edh5GyeeV0oCLFkAACH5BAUKAAIALA0AAgAKABUAAAIUjI+py+0PYxO0WoCz3rz7D4bi+BUAIfkEBQoAAgAsAgANABUACgAAAh2EjxLLjQ9UmzBNWo28K2vOeBHYeRsnnldKBixZAAA7"/>
</div><!-- /.modal-dialog -->
</div><!--等待动画模态框-->
</body>js
<footer>
<script>
var file_param = {
buttonText: "浏览", //按钮名称
buttonName: "btn-primary", //按钮风格
//size: "lg", //按钮尺寸
iconName: "glyphicon glyphicon-inbox", //按钮图标
disabled: false, //按钮是否禁止选择
buttonBefore: true, //按钮在输入框前
input: false, //是否显示输入框
placeholder: "请选择文件", //输入框默认占位符
//当input为true时,标记计数器无效
badge: true //启用或禁用标记计数器
};
//初始化上传按钮
$(":file").filestyle(file_param);
//全局单文件大小限制
var global_single_file_size = 1024 * 1024;
//全局总文件大小限制
var global_total_file_size = 1024 * 1024 * 10;
//全局最大文件上传数量
var global_file_total_num = 5;
//验证上传文件大小,数量限制
function validateFile() {
var vali_size = true;
var total_size = 0;
var length = $("#files").prop('files').length;
//允许不上传文件,如果不允许这部直接return false
if (length == 0) {
return true;
}
if (length > global_file_total_num) {
alert("文件数量超过限制");
return false;
}
for (var i = 0; i < length; i++) {
var size = $("#files").prop('files')[i].size;
if (size > global_single_file_size) {
alert("单文件超过大小限制");
vali_size = false;
break;
} else {
total_size += size;
}
}
if (!vali_size) {
return false;
} else if (total_size > global_total_file_size) {
alert("总文件超过大小限制");
return false;
}
return true;
}
//提交操作
function fileSubmit() {
var form = $('#submit_form')[0];
//使用formData提交表单
var formData = new FormData(form);
$.ajax({
type: "POST",
url: "/url",
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
//提交前打开等待动画
beforeSend: function () {
//如在模态框中提交,需先关闭当前模态框,再打开模态框
$("#wait_modal").modal({backdrop: 'static', keyboard: false});
},
success: function (data) {
alert('操作成功');
window.location.href = "xxxurl"
},
//完成操作后隐藏等待动画
complete: function () {
$("#wait_modal").modal('hide');
},
error: function () {
alert("出现错误");
}
});
}
</script>
</footer>?
