bootstrap 的上传文件控件号称最好用的，总之我用着到是挺别扭的。

首先这个控件很简单。

html代码

<form>
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
</form>

可能需要保存按钮等等，这可以另外添加，指定事件方法就行，当然，需要在html中引入bootstrap的相关css和js

fileinput.js和fileinput.css

在你自己的js中，也就是保存按钮等的事件方法中需要写一段关键代码

$('#txt_file').fileinput('upload');

这就是上传的代码。

除了以上这些，还需要一段重要的代码，这个初始化上传控件用的，也就是设置一些必要的参数

function initFileInput(ctrlName, uploadUrl) {
  var control = $('#' + ctrlName);
  control.fileinput({
   language: 'zh', //设置语言
   uploadUrl: uploadUrl, //上传的地址
   allowedFileExtensions : ['txt', 'doc','docx'],//接收的文件后缀
   showUpload: false, //是否显示上传按钮
   showCaption: false,//是否显示标题
   enctype: 'multipart/form-data',
   browseClass: "btn btn-primary", //按钮样式    
   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
   uploadExtraData: function() { //额外参数的关键点
     return data;
    }
   }).on("fileuploaded", function (event, data, previewId, index) {
    fileResponseData.push(data.response.Attach);
   });
 }
 
 //-----入口方法-----
 $(function() {
  initFileInput("txt_file", "/updateFile.do");
 });

设置这些后，bootstrap就可以自动上传文件，具体上传的规则，是由项目的controller控制的。

关于回调函数，就是 on("dileuploaded",func......)，这是附件上传成功后就会调用一次，也有刚选择附件时的回调函数，关键字是filebatchselected。

关键说一下bootstrap的上传机制，它支持多文件上传，是多线程来上传文件，一个附件传一次，因此上传成功后的回调函数是会调用多次的。

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

# bootstrap  # fileinput  # 文件上传  # Bootstrap Fileinput文件上传组件用法详解  # JS文件上传神器bootstrap fileinput详解  # Bootstrap的fileinput插件实现多文件上传的方法  # Bootstrap fileinput文件上传预览插件使用详解  # BootStrap fileinput.js文件上传组件实例代码  # Bootstrap文件上传组件之bootstrap fileinput  # 值得学习的bootstrap fileinput文件上传工具  # Bootstrap自定义文件上传下载样式  # BootStrap实现文件上传并带有进度条效果  # Bootstrap Fileinput 4.4.7文件上传实例详解  # 上传  # 回调  # 上传文件  # 自己的  # 这是  # 就会  # 也有  # 这就是  # 是由  # 就行  # 很简单  # 还需要  # 这可  # 多线程  # 大家多多  # 最好用  # 就可以  # 用着  # strong 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 英语简历制作免费网站推荐,如何将简历翻译成英文？  Laravel模型事件有哪些_Laravel Model Event生命周期详解  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  如何破解联通资金短缺导致的基站建设难题？  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  详解Android图表 MPAndroidChart折线图  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何获取免费开源的自助建站系统源码？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  Laravel如何升级到最新版本？（升级指南和步骤）  Laravel中的Facade(门面)到底是什么原理  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  EditPlus中的正则表达式实战(5)  nodejs redis 发布订阅机制封装实现方法及实例代码  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  浅述节点的创建及常见功能的实现  微信小程序 闭包写法详细介绍  如何选择PHP开源工具快速搭建网站？  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  如何用已有域名快速搭建网站？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  Laravel如何自定义错误页面（404, 500）？（代码示例）  非常酷的网站设计制作软件,酷培ai教育官方网站？  浅析上传头像示例及其注意事项  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  如何在建站之星网店版论坛获取技术支持？  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  晋江文学城电脑版官网 晋江文学城网页版直接进入  想要更高端的建设网站，这些原则一定要坚持！  微信小程序 配置文件详细介绍  大型企业网站制作流程,做网站需要注册公司吗？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  如何在Windows服务器上快速搭建网站？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  如何快速搭建高效香港服务器网站？  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  如何快速完成中国万网建站详细流程？  Laravel如何使用Telescope进行调试？（安装和使用教程）  网易LOFTER官网链接 老福特网页版登录地址  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  清除minerd进程的简单方法  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Java垃圾回收器的方法和原理总结