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实现文件上传并带有进度条效果，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论