bootstrap文件上传的使用，带有进度条

最新推荐文章于 2025-06-23 13:51:52 发布

原创最新推荐文章于 2025-06-23 13:51:52 发布 · 4.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #文件上传插件

本文分享了利用Bootstrap实现文件上传功能的过程，包括文件上传后的路径保存到数据库，以及利用Bootstrap的样式和组件实现预览、大小格式限制和进度条效果。通过前端JS与后台交互，实现了在上传成功后将文件路径保存到数据库，强调了在验证过程中使用控制台的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="stylesheet">

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

<input type="file" name="my" class="file" id="aaa"  data-show-upload="true" data-show-caption="true"><br>

3.具体的文件上传的方法
在上传成功之后还有一个ajax的方法，真是太神奇了
有些时候试试才知道，可不可以

  //上传文件
    Initfileinput = function (uploadurl){
        $("#aaa").fileinput({
            //uploadUrl: "../fileinfo/save", // server upload action
            uploadUrl:"http://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:"http://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 (); //记得加载，初始化