BootStrap实现文件上传并带有进度条效果_网络技术

BootStrap实现文件上传并带有进度条效果

发布时间 - 2026-01-11 03:12:21 点击率：次

1.做了一天终于做出来了，在上传成功之后，可以将路径添加到数据库，因为一直在烦恼如何在上传成功之后在将路径添加到数据库，终于弄出来了，太开心了，不得不说bootstrap的强大，之前说ajax不能上传文件，之后想办法，用js写，更改了上传文件按钮的样式，但是没想到bootstrap真的太厉害了，样式还不错，可以预览，图片，限制文件的大小，格式等等，还有进度条。

后台的代码在之前写过了

这只有前台的代码

记得:在验证的时候，尽量用控制台来验证,有的时候你的代码写对了，但是有可能alert不显示

console.log("aaaa");

1.导入相应的js和样式

<script type="text/javascript" src="jsbootstrap/locales/zh.js"></script>
<script type="text/javascript" src="jsbootstrap/fileinput.min.js" ></script>
<link href="css/css/fileinput.min.css" rel="external nofollow" rel="stylesheet">

2.模态框里加入，千万要记住name的属性和你后台的代码属性有关，还有class需要是file

<input type="file" name="my" class="file" id="aaa" data-show-upload="true" data-show-caption="true"><br>
<span style="font-family: Arial, Verdana, sans-serif;">3.具体的文件上传的方法</span>

在上传成功之后还有一个ajax的方法，真是太神奇了

有些时候试试才知道，可不可以

//上传文件
 Initfileinput = function (uploadurl){
  $("#aaa").fileinput({
   //uploadUrl: "../fileinfo/save", // server upload action
   uploadUrl:"https://localhost:8080/GD/UploadAction_execute.action",
   required: true,
   showBrowse: true,
   browseOnZoneClick: true,
   dropZoneEnabled: false,
   allowedFileExtensions: ["jpg", "xlsx"],//只能选择xls,和xlsx格式的文件提交
   //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
   layoutTemplates:{ actionUpload:''},
   /*上传成功之后运行*/
   fileuploaded:$("#aaa").on("fileuploaded", function (event, data, previewId, index) {
    console.log("Upload success");
    var a = document.getElementById('aaa').value;
    console.log(a);
    $.ajax({
     type:"post",
     async:false,
     url:"https://localhost:8080/GD/UploadAction_add.action",
     data:{
      "filepath.path" : a
     },
     dataType:"json",
     success:function () {
      console.log("添加成功");
     }
    })
   }),
   /*上传出错误处理*/
   fileerror:$('#aaa').on('fileerror', function(event, data, msg) {
    console.log("Upload failed")
   }),
  });
 }
 Initfileinput (); //记得加载，初始化

总结

以上所述是小编给大家介绍的BootStrap实现文件上传并带有进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # 文件上传 # 进度条 # Bootstrap Fileinput文件上传组件用法详解 # JS文件上传神器bootstrap fileinput详解 # Bootstrap的fileinput插件实现多文件上传的方法 # Bootstrap fileinput文件上传预览插件使用详解 # BootStrap fileinput.js文件上传组件实例代码 # Bootstrap文件上传组件之bootstrap fileinput # 值得学习的bootstrap fileinput文件上传工具 # bootstrap fileinput实现文件上传功能 # Bootstrap自定义文件上传下载样式 # Bootstrap Fileinput 4.4.7文件上传实例详解 # 上传 # 来了 # 上传文件 # 小编 # 过了 # 有可能 # 在此 # 和你 # 才知道 # 给大家 # 还有一个 # 这只 # 还不错 # 想办法 # 真是太 # 改了 # 所述 # 给我留言

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

上一篇：nginx限速之连接数限制的方法

下一篇：yandex浏览器与搜索入口俄罗斯官方搜索引擎首页

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：nginx限速之连接数限制的方法

下一篇：yandex浏览器与搜索入口俄罗斯官方搜索引擎首页