bootstrapfileinput实现文件自动上传

<script type="text/javascript" src="/UploadFiles/2021-04-02/fileinput.min.js">

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实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。