bootstrap-fileInput

最新推荐文章于 2025-06-08 09:02:16 发布

原创最新推荐文章于 2025-06-08 09:02:16 发布 · 643 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#fileInput #bootstrap

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用Bootstrap FileInput插件实现文件上传的过程，包括初始化上传控件样式、配置参数及通过回调函数展示上传结果。

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

刚接触H5不久，喜欢bootstrap的风格，因此想用它来完成或积累这几年所学的点点滴滴；
这里写图片描述
这些天做文件上传控件，使用的是bootstrap fileInput，网上大多数问题是回调函数的使用，我也参考了网上的例子，大概记录一下用jquery的on函数来做回调的步骤

html：

 <input id="uploadFile" class="file" type="file" name="myFiles" multiple="true" >

js:

//初始化上传控件的样式
        $("#uploadFile").fileinput({
            language: 'zh', //设置语言
            uploadUrl: '/uploadFile/uploadFile.do', //上传的地址
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            overwriteInitial: false,
            maxFileSize: 1000,//单位为kb，如果为0表示不限制文件
            //uploadAsync:true,//异步上传
            //maxFileCount:,//控制异步上传数量
            //browseClass: "btn btn-primary", //按钮样式
            //uploadExtraData:{id:'kv-1'}, //可传入参数
            slugCallback: function(filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        });

回调JS：

$("#uploadFile").on("fileuploaded", function (event, data, previewId, index) {
            alert(data.response[1].filePath);
          });

java简单描述：

public void uploadFile(@RequestParam(value = "myFile", required = false) MultipartFile myFile, HttpServletRequest request, ModelMap model)throws SmallException{
        //上传代码省略...
        try {
            outPutString("[{\"success\":\"完成\"},{\"filePath\":\"XX\"}]");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

其中写出的参数，错误文件上传有使用的error:”错误信息”；正确文件则使用success:”完成”;再加入路径等等参数来做一个回显文件的功能.
有问题的地方还望指针，感谢~