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 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
移动端js触摸事件详解
Sep 18 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
js实现录音上传功能
Nov 22 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
PHP 面向对象 final类与final方法
2010/05/05 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP代码优化的53个细节
2014/03/03 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
js实现上传图片并显示图片名称
2019/12/18 Javascript
深入理解javascript中的this
2021/02/08 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python模拟三级菜单效果
2017/09/11 Python
python绘制中国大陆人口热力图
2018/11/07 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
幼儿园毕业家长感言
2014/02/10 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2014年保卫工作总结
2014/12/05 职场文书
医院志愿者活动总结
2015/05/06 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS