bootstrapfileinput实现文件自动上传
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
这篇文章主要介绍了bootstrapfileinput实现文件自动上传,bootstrap fileinput插件对多种类型的文件提供文件预览，并且提供了多选等功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap fileinput文件上传插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能，完全没有理由不去使用，
JS引用：
<script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script> <link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" /> <script src="~/Scripts/lib/jquery.json.js"></script>
HTML:
<input id="fileUpload" type="file" >
JS:
//自动上传文件-JS
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址 (该方法需返回JSON字符串)
allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后缀
showUpload: false, //是否显示上传按钮
showCaption: true,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
//previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
uploadExtraData: { ID: "123" }
}).on('filebatchselected', function (event, data, id, index) {
$(this).fileinput("upload");
}).on("fileuploaded", function (event, data) {
if (data.response) {
//通过 data.response.Json对象属性 获得返回数据
errors = data.response.ErrorList;
}
})
}
//上传JS初始化
$(function () {
initFileInput("fileUpload", "Controllers/Action");
});
//获取上传文件弹窗关闭动作
$("#fileUpload").change(function () { alert("上传文件弹窗已关闭") })
参考资料：bootstrap上传插件fileinput自动上传&成功回调
bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传&上传成功回调的用例.核心就是调用 filebatchselected 文件选择完成事件实现的,文件上传成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .
<script>
$("#update_csv").fileinput({
showUpload: false,
language:'zh',
uploadAsync:true,
dropZoneEnabled:false,
uploadUrl:'http://www.soyiyuan.com/',
maxFileCount: 1,
maxImageWidth: 600,
resizeImage: false,
showCaption: false,
showPreview: false,
browseClass: "btn btn-primary btn-lg",
allowedFileExtensions : ['csv', 'txt'],
previewFileIcon: ""
}).on("filebatchselected", function(event, files) {
$(this).fileinput("upload");
})
.on("fileuploaded", function(event, data) {
if(data.response)
{
alert('处理成功');
}
});
</script>
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。