bootstrap-fileinput的基本使用（图片/视频）

小鱼儿 2021-11-09 16:38 405阅读 0赞

# #

**目录**

前言

编码实现（图片/视频）

上传图片

上传视频

资料

--------------------

## 前言 ##

> 最近写上传file用过好几次这个插件，每次都记不住，这里记录一下。
> 
> fileinput官方git地址：[https://github.com/kartik-v/bootstrap-fileinput/tree/master][https_github.com_kartik-v_bootstrap-fileinput_tree_master]
> 
> 这里根据分支下需要的fileinput版本就行。
> 
> bootstrap官方下载地址：[https://v3.bootcss.com/getting-started\#download][https_v3.bootcss.com_getting-started_download]

## 编码实现（图片/视频） ##

**引入相关的css跟js**

> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
> <link href="css/fileinput.min.css" rel="stylesheet" type="text/css" />
> <link href="css/fileinput-rtl.min.css" rel="stylesheet" type="text/css" />
> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
> <script type="text/javascript" src="js/bootstrap.min.js"></script>
> <script type="text/javascript" src="js/fileinput.min.js"></script>
> 
> 注意引入顺序，需要jquery支持，jquery版本不能低于1.9

### 上传图片 ###

**html**

<div class="form-group" style="display:none" >
 <label for="carousel_img" class="col-sm-2 control-label">群图片介绍</label>
     <div class="col-sm-4">
     <input type="file" multiple="multiple" id="carousel_img" name="carousel_img" placeholder="群图片介绍"/>
         <input type="hidden" name="carouselImgs" id="carousel_imgs_hidden"/>
     </div>
 </div>

**js（添加）**

**java**

@PostMapping("img")
    public Object img(@RequestParam("carousel_img") MultipartFile file){
        String fileName = FileUploadUtil.uploadImage(file);
        return ResultVOUtil.getResult(ResultEnum.SUCCESS, fileName) ;
    }

import org.apache.commons.io.FileUtils;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.File;
    import java.io.IOException;
    import java.util.UUID;
    
    public class FileUploadUtil {
    
        private static final String uploadPath = PropertieUtils.getString("upload.img.path");
    
        public static String uploadImage(MultipartFile file){
            String fileName = file.getOriginalFilename();
            fileName = UUID.randomUUID().toString().replace("-", "")
                    .concat(fileName.substring(fileName.lastIndexOf("."))) ;
            try {
                FileUtils.copyInputStreamToFile(file.getInputStream(),new File(uploadPath, fileName));
            } catch (IOException e) {
                e.printStackTrace();
            }
            return fileName ;
        }
    
    }

**js（回显）**

> 上述代码就是上传图片的相关代码了，个别点说明一下。
> 
>  
> 
> **fileuploaded**
> 
> 当图片上传成功之后回调的函数，这里回传了一个data。
> 
> 通过data.response就可以拿到接口返回的数据。我返回的是\{"code":0,"data":"xxx/xxx"\}
> 
> 所以我获取返回值是data.response.data
> 
>  
> 
> **filesuccessremove**
> 
> 当图片成功删除之后回调的函数，比方说用户传了10张图片，这里删除了第5张图片，
> 
> 就可以根据回调参数“previewId”来知道删除的是哪张图片，继而删除或者执行业务逻辑操作。

### 上传视频 ###

**html**

**js**

> 其他剩余代码就是上传的java相关代码了，跟上传图片类似，就不贴了。

### 资料 ###

fileinput所有属性作用以及详细说明官方地址：[http://plugins.krajee.com/file-input/plugin-options\#top][http_plugins.krajee.com_file-input_plugin-options_top]

> **option选项说明：**
> 
> <table> 
> <tbody> 
> <tr> 
> <td style="vertical-align:top;"> 属性名 </td> 
> <td style="vertical-align:top;"> 属性类型 </td> 
> <td style="vertical-align:top;"> 描述说明 </td> 
> <td style="vertical-align:top;"> 默认值 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> language </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 多语言设置，使用时需提前引入\locales文件夹下对应的语言文件， 中文zh，引入语言文件必须放在fileinput.js之后 </td> 
> <td style="vertical-align:top;"> 'en' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showCaption </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否显示被选文件的简介 </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showBrowse </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否显示浏览按钮 </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showPreview </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否显示预览区域 </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showRemove </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否显示移除按钮 </td> 
> <td style="vertical-align:top;"> true, </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showUpload </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否显示上传按钮 </td> 
> <td style="vertical-align:top;"> true, </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showCancel </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否显示取消按钮 </td> 
> <td style="vertical-align:top;"> true, </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showClose: </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否显示关闭按钮 </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showUploadedThumbs </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> browseOnZoneClick </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> autoReplace </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> 是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。 </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> generateFileId </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 添加预览按钮的类属性 </td> 
> <td style="vertical-align:top;"> ‘’ </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> captionClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> ‘’ </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> frameClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'krajee-default' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> mainClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'file-caption-main' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> mainTemplate </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> purifyHtml </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> fileSizeGetter </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialCaption </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialPreview </td> 
> <td style="vertical-align:top;"> Array/Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> [] </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialPreviewDelimiter </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '*$$*' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialPreviewAsData </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialPreviewFileType </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'image' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialPreviewConfig </td> 
> <td style="vertical-align:top;"> Array/Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> [] </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialPreviewThumbTags </td> 
> <td style="vertical-align:top;"> Array/Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> [] </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewThumbTags </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> initialPreviewShowDelete </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> removeFromPreviewOnError </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> deleteUrl </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 删除图片时的请求路径 </td> 
> <td style="vertical-align:top;"> '' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> deleteExtraData </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> 删除图片时额外传入的参数 </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> overwriteInitial </td> 
> <td style="vertical-align:top;"> Boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewZoomButtonIcons </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> { prev: '&lt;i class="glyphicon glyphicon-triangle-left"&gt;&lt;/i&gt;', &nbsp; next: '&lt;i class="glyphicon glyphicon-triangle-right"&gt;&lt;/i&gt;', &nbsp; toggleheader: '&lt;i class="glyphicon glyphicon-resize-vertical"&gt;&lt;/i&gt;', &nbsp; fullscreen: '&lt;i class="glyphicon glyphicon-fullscreen"&gt;&lt;/i&gt;', &nbsp; borderless: '&lt;i class="glyphicon glyphicon-resize-full"&gt;&lt;/i&gt;', &nbsp;&nbsp;close: '&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;' }, </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewZoomButtonClasses </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {&nbsp; prev: 'btn btn-navigate', &nbsp; next: 'btn btn-navigate', &nbsp; toggleheader: 'btn btn-default btn-header-toggle', &nbsp; fullscreen: 'btn btn-default', &nbsp; borderless: 'btn btn-default', &nbsp; close: 'btn btn-default' }, </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> preferIconicPreview </td> 
> <td style="vertical-align:top;"> Boolrean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> preferIconicZoomPreview </td> 
> <td style="vertical-align:top;"> Boolrean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> allowedPreviewTypes </td> 
> <td style="vertical-align:top;"> undefined </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> undefined </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> allowedPreviewMimeTypes </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> allowedFileTypes </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> 接收的文件后缀，如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> allowedFileExtensions </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> defaultPreviewContent </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> customLayoutTags </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> customPreviewTags </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewFileIcon </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '&lt;i class="glyphicon glyphicon-file"&gt;&lt;/i&gt;' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewFileIconClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'file-other-icon' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewFileIconSettings </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewFileExtSettings </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> buttonLabelClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'hidden-xs' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> browseIcon </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '&lt;i class="glyphicon glyphicon-folder-open"&gt;&lt;/i&gt;&amp;nbsp;' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> browseClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'btn btn-primary' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> removeIcon </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> removeClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'btn btn-default' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> cancelIcon </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '&lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> cancelClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'btn btn-default' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> uploadIcon </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '&lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> uploadClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'btn btn-default' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> uploadUrl </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 上传文件路径 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> uploadAsync </td> 
> <td style="vertical-align:top;"> boolean </td> 
> <td style="vertical-align:top;"> 是否为异步上传 </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> uploadExtraData </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 上传文件时额外传递的参数设置 </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> zoomModalHeight </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 480 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> minImageWidth </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 图片的最小宽度 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> minImageHeight </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 图片的最小高度 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> maxImageWidth </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 图片的最大宽度 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> maxImageHeight </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 图片的最大高度 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> resizeImage </td> 
> <td style="vertical-align:top;"> boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> resizePreference </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'width' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> resizeQuality </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 0.92 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> resizeDefaultImageType </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'image/jpeg' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> minFileSize </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> 单位为kb，上传文件的最小大小值 </td> 
> <td style="vertical-align:top;"> 0 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> maxFileSize </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> 单位为kb，如果为0表示不限制文件大小 </td> 
> <td style="vertical-align:top;"> 0 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> resizeDefaultImageType </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 25600(25MB) </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> minFileCount </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> 表示同时最小上传的文件个数 </td> 
> <td style="vertical-align:top;"> 0 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> maxFileCount </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> 表示允许同时上传的最大文件个数 </td> 
> <td style="vertical-align:top;"> 0 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> validateInitialCount </td> 
> <td style="vertical-align:top;"> boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> false </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> msgValidationErrorClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'text-danger' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> msgValidationErrorIcon </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '&lt;i class="glyphicon glyphicon-exclamation-sign"&gt;&lt;/i&gt; ' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> msgErrorClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 'file-error-message' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> progressThumbClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> "progress-bar progress-bar-success progress-bar-striped active" </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> rogressClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> "progress-bar progress-bar-success progress-bar-striped active" </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> progressCompleteClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> "progress-bar progress-bar-success" </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> progressErrorClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> "progress-bar progress-bar-danger" </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> progressUploadThreshold </td> 
> <td style="vertical-align:top;"> number </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 99 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> previewFileType </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式 </td> 
> <td style="vertical-align:top;"> 'image' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> elCaptionContainer </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> elCaptionText </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 设置标题栏提示信息 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> elPreviewContainer </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> elPreviewImage </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> elPreviewStatus </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> elErrorContainer </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> errorCloseButton </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '&lt;span class="close kv-error-close"&gt;&amp;times;&lt;/span&gt;' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> slugCallback </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp;暂时没有搜到说明，调试显示，在文件选择后会调到这个方法。 </td> 
> <td style="vertical-align:top;"> null </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> dropZoneEnabled </td> 
> <td style="vertical-align:top;"> boolean </td> 
> <td style="vertical-align:top;"> 是否显示拖拽区域 </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> dropZoneTitleClass </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 拖拽区域类属性设置 </td> 
> <td style="vertical-align:top;"> 'file-drop-zone-title' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> fileActionSettings </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> otherActionButtons </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> '' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> textEncoding </td> 
> <td style="vertical-align:top;"> String </td> 
> <td style="vertical-align:top;"> 编码设置 </td> 
> <td style="vertical-align:top;"> 'UTF-8' </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> ajaxSettings </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> ajaxDeleteSettings </td> 
> <td style="vertical-align:top;"> Object </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> {} </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> showAjaxErrorDetails </td> 
> <td style="vertical-align:top;"> boolean </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> true </td> 
> </tr> 
> </tbody> 
> </table>

> **Method说明：**
> 
> <table> 
> <tbody> 
> <tr> 
> <td style="vertical-align:top;"> 方法名 </td> 
> <td style="vertical-align:top;"> 参数 </td> 
> <td style="vertical-align:top;"> 描述 </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> fileerror </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 异步上传错误结果处理 $('#uploadfile').on('fileerror', function(event, data, msg) { }); </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> fileuploaded </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 异步上传成功结果处理 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { }) </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> filebatchuploaderror </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 同步上传错误结果处理 $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) { }); </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> filebatchuploadsuccess </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 同步上传成功结果处理 $('#uploadfile').on('filepreupload', function(event, data, previewId, index) {&nbsp; &nbsp;&nbsp; }); </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> filebatchselected </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 选择文件后处理事件 $("#fileinput").on("filebatchselected", function(event, files) { }); </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> upload </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 文件上传方法 $("#fileinput").fileinput("upload"); </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> fileuploaded </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 上传成功后处理方法 $("#fileinput").<code>on(</code><code>"fileuploaded", function(event, data, previewId, index) { </code> <code>});</code> </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> filereset </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> fileclear </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 点击浏览框右上角X 清空文件前响应事件 $("#fileinput").on("fileclear",function(event, data, msg){ }); </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> filecleared </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 点击浏览框右上角X 清空文件后响应事件 $("#fileinput").on("filecleared",function(event, data, msg){ }); </td> 
> </tr> 
> <tr> 
> <td style="vertical-align:top;"> fileimageuploaded </td> 
> <td style="vertical-align:top;"> &nbsp; </td> 
> <td style="vertical-align:top;"> 在预览框中图片已经完全加载完毕后回调的事件 &nbsp; </td> 
> </tr> 
> </tbody> 
> </table>

对你有帮助的话，右上角给个赞呗~

[https_github.com_kartik-v_bootstrap-fileinput_tree_master]: https://github.com/kartik-v/bootstrap-fileinput/tree/master
[https_v3.bootcss.com_getting-started_download]: https://v3.bootcss.com/getting-started#download
[http_plugins.krajee.com_file-input_plugin-options_top]: http://plugins.krajee.com/file-input/plugin-options#top