BootStrap实现上传文件时显示进度

PHP中文网 • 2025年3月8日 12:47:24 • 编程技术 • 阅读 2

这次给大家带来BootStrap实现上传文件时显示进度，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 (); //记得加载，初始化

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！