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


Posted in Javascript onSeptember 11, 2017

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实现文件上传并带有进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 #Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 #Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
详解webpack2+React 实例demo
Sep 11 #Javascript
react-native 完整实现登录功能的示例代码
Sep 11 #Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 #Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 #Javascript
You might like
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Python中的ctime()方法使用教程
2015/05/22 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python字符串格式化方式解析
2019/10/19 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
学生不讲诚信检讨书
2014/09/29 职场文书
领导参观欢迎词
2015/01/26 职场文书
民事上诉状范文
2015/05/22 职场文书
学会感恩主题班会
2015/08/12 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS