bootstrapfileinput实现文件自动上传
bootstrapfileinput文件上传插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能，完全没有理由不去使用，
JS引用：
<scripttype="text/javascript"src="~/bootstrap/js/fileinput.min.js"></script> <linkhref="~/bootstrap/css/fileinput.min.css"rel="stylesheet"/> <scriptsrc="~/Scripts/lib/jquery.json.js"></script>
HTML:
<inputid="fileUpload"type="file" >
JS:
//自动上传文件-JS
functioninitFileInput(ctrlName,uploadUrl){
varcontrol=$('#'+ctrlName);
control.fileinput({
language:'zh',//设置语言
uploadUrl:uploadUrl,//上传的地址(该方法需返回JSON字符串)
allowedFileExtensions:['xlsx','xls','txt'],//接收的文件后缀
showUpload:false,//是否显示上传按钮
showCaption:true,//是否显示标题
browseClass:"btnbtn-primary",//按钮样式
//previewFileIcon:"<iclass='glyphiconglyphicon-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.
注意插件版本是version4.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:"btnbtn-primarybtn-lg",
allowedFileExtensions:['csv','txt'],
previewFileIcon:""
}).on("filebatchselected",function(event,files){
$(this).fileinput("upload");
})
.on("fileuploaded",function(event,data){
if(data.response)
{
alert('处理成功');
}
});
</script>
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。