Bootstrap FileInput插件的使用

最新推荐文章于 2023-08-15 11:48:00 发布

转载最新推荐文章于 2023-08-15 11:48:00 发布 · 424 阅读

JS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap FileInput插件进行文件上传，包括初始化设置、选项说明及前后台交互示例，适用于Java+SpringBoot环境。

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

详细介绍（英语）：

http://plugins.krajee.com/file-preview-management-demo#preview-iconic

Bootstrap FileInput中文API整理：

https://blog.youkuaiyun.com/u012526194/article/details/69937741

java+springboot+bootstrap-fileInput 文件上传前后台完整示例

https://www.cnblogs.com/zgghb/p/6020581.html

1.初始化设置：

$("#uploadfile").fileinput({
                language: 'zh', //设置语言
                uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
               allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
               //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
                uploadAsync: true, //默认异步上传
                showUpload:true, //是否显示上传按钮
                showRemove :true, //显示移除按钮
                showPreview :true, //是否显示预览
                showCaption:false,//是否显示标题
                browseClass:"btn btn-primary", //按钮样式    
               dropZoneEnabled: false,//是否显示拖拽区域
               //minImageWidth: 50, //图片的最小宽度
               //minImageHeight: 50,//图片的最小高度
               //maxImageWidth: 1000,//图片的最大宽度
               //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
               //minFileCount: 0,
                maxFileCount:10, //表示允许同时上传的最大文件个数
                enctype:'multipart/form-data',
               validateInitialCount:true,
                previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
               msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
           }).on("fileuploaded", function (event, data, previewId, index){
});

2. Options 说明：

详见《Bootstrap FileInput中文API整理》

3.怎么接收后台file

 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;