常见问题当前位置:鸿宇娱乐 > 常见问题 > >

bootstrapfileinput实现文件自动上传

  

[bootstrap,fileinput,文件上传]bootstrapfileinput实现文件自动上传

  

bootstrap fileinput文件上传插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,  

  

JS引用:  
  
  

  
  
    
  
  

HTML:  

  

鸿宇娱乐平台  

  

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: "",  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 .

  
  
  

  
  
  $("#update_csv").fileinput({  showUpload: false,  language:'zh',  uploadAsync:true,  dropZoneEnabled:false,  uploadUrl:'',  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('处理成功');  }  });  
  
  

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程  Bootstrap实战教程  

  

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

  
  

(责任编辑:admin)

上一篇:鸿宇娱乐平台:erp供应链管理APP系统开发解决方

下一篇:鸿宇娱乐:关于JS字符串函数String.replace()

推荐内容

客户服务热线

010-400-12345

在线客服