bootstrapfileinput实现文件自动上传

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>

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。