源码地址:
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="https://img-blog.csdnimg.cn/2022010616080376590.gif"/>
</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>