1.做了一天终于做出来了,在上传成功之后,可以将路径添加到数据库,因为一直在烦恼如何在上传成功之后在将路径添加到数据库,终于弄出来了,太开心了,不得不说bootstrap的强大,之前说ajax不能上传文件,之后想办法,用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条。
记得:在验证的时候,尽量用控制台来验证,有的时候你的代码写对了,但是有可能alert不显示
1.导入相应的js和样式
nofollow" rel="stylesheet">
2.模态框里加入,千万要记住name的属性和你后台的代码属性有关,还有class需要是file
有些时候试试才知道,可不可以
上传文件
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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。