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

前端之家收集整理的这篇文章主要介绍了BootStrap实现文件上传并带有进度条效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

后台代码在之前写过了

这只有前台代码

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

1.导入相应的js和样式

nofollow" rel="stylesheet">

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

文件上传方法

上传成功之后还有一个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,msg) { console.log("Upload Failed") }),}); } Initfileinput (); //记得加载,初始化

总结

以上所述是小编给大家介绍的BootStrap实现文件上传并带有进度条效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章