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

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

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

后台的代码在之前写过了

这只有前台的代码

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

console.log("aaaa");

1.导入相应的js和样式

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

3.具体的文件上传的方法

在上传成功之后还有一个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实现文件上传并带有进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。