文件上传组件
<h5>1.文件上传相关代码</h5>
<p>文件上传除了基础的bootstrap、jq的相关js、css外，需要引入如下的相关文件</p>
<ul>
<li>css文件引入：
<pre><code class="language-java"><link href="/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link href="/bootstrap-fileinput/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/></code></pre></li>
<li>js文件引入：
<pre><code class="language-java"><script src="/bootstrap-fileinput/js/plugins/piexif.js" type="text/javascript"></script>
<script src="/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>
<script src="/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/bootstrap-fileinput/js/locales/fr.js" type="text/javascript"></script>
<script src="/bootstrap-fileinput/js/locales/es.js" type="text/javascript"></script>
<script src="/bootstrap-fileinput/themes/fas/theme.js" type="text/javascript"></script>
<script src="/bootstrap-fileinput/themes/explorer-fas/theme.js" type="text/javascript"></script></code></pre></li>
</ul>
<p>html代码：</p>
<pre><code class="language-java"><form role="form" enctype="multipart/form-data" method="POST" action="/authorization/wxCard/uploadImages">
<div class="kv-avatar">
<div class="file-loading">
<input id="bookimg" name="file" type="file" multiple>
</div>
</div>
<div id="kv-avatar-errors" class="center-block" style="width:800px;display:none"></div>
</form></code></pre>
<p>js代码：</p>
<pre><code class="language-java"><script>
$("#bookimg").fileinput({
'uploadUrl': '/common/upload',
overwriteInitial: false,
maxFileSize: 1500,
showClose: false,
showCaption: false,
showBrowse: false,
initialPreviewAsData: true,
browseOnZoneClick: true,
initialPreview: [
//"/img/profile.jpg"
],
removeLabel: '删除',
removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
removeTitle: 'Cancel or reset changes',
elErrorContainer: '#kv-avatar-errors',
msgErrorClass: 'alert alert-block alert-danger',
defaultPreviewContent: '<img src="/bootstrap-fileinput/img/default-avatar-male.png" alt="单个图片上传" alt="Your Avatar" width="100" ><h6 class="text-muted">Click to select</h6>',
layoutTemplates: {main2: '{preview} ' + ' {remove} {browse} {upload}'},
allowedFileExtensions : ['jpg', 'png','bmp','jpeg']
});
$("#bookimg").on("fileuploaded", function (event, data, previewId, index) {
if(data.response.code == 0){
alert('上传成功');
}
});
</script></code></pre>
<h5>2.参数说明</h5>
<table>
<thead>
<tr>
<th>属性名</th>
<th>属性类型</th>
<th>描述说明</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>language</td>
<td>String</td>
<td>多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，</td>
<td>'en'</td>
</tr>
<tr>
<td></td>
<td></td>
<td>中文zh，引入语言文件必须放在fileinput.js之后</td>
</tr>
<tr>
<td>showCaption</td>
<td>Boolean</td>
<td>是否显示被选文件的简介</td>
<td>TRUE</td>
</tr>
<tr>
<td>showBrowse</td>
<td>Boolean</td>
<td>是否显示浏览按钮</td>
<td>TRUE</td>
</tr>
<tr>
<td>showPreview</td>
<td>Boolean</td>
<td>是否显示预览区域</td>
<td>TRUE</td>
</tr>
<tr>
<td>showRemove</td>
<td>Boolean</td>
<td>是否显示移除按钮</td>
<td>true,</td>
</tr>
<tr>
<td>showUpload</td>
<td>Boolean</td>
<td>是否显示上传按钮</td>
<td>true,</td>
</tr>
<tr>
<td>showCancel</td>
<td>Boolean</td>
<td>是否显示取消按钮</td>
<td>true,</td>
</tr>
<tr>
<td>showClose:</td>
<td>Boolean</td>
<td>是否显示关闭按钮</td>
<td>TRUE</td>
</tr>
<tr>
<td>showUploadedThumbs</td>
<td>Boolean</td>
<td></td>
<td>TRUE</td>
</tr>
<tr>
<td>browseOnZoneClick</td>
<td>Boolean</td>
<td></td>
<td>FALSE</td>
</tr>
<tr>
<td>autoReplace</td>
<td>Boolean</td>
<td>是否自动替换当前图片，设置为true时，再次选择文件，</td>
<td>FALSE</td>
</tr>
<tr>
<td></td>
<td></td>
<td>会将当前的文件替换掉。</td>
</tr>
<tr>
<td>generateFileId</td>
<td>Object</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>previewClass</td>
<td>String</td>
<td>添加预览按钮的类属性</td>
<td>‘’</td>
</tr>
<tr>
<td>captionClass</td>
<td>String</td>
<td></td>
<td>‘’</td>
</tr>
<tr>
<td>frameClass</td>
<td>String</td>
<td></td>
<td>'krajee-default'</td>
</tr>
<tr>
<td>mainClass</td>
<td>String</td>
<td></td>
<td>'file-caption-main'</td>
</tr>
<tr>
<td>mainTemplate</td>
<td>Object</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>purifyHtml</td>
<td>Boolean</td>
<td></td>
<td>TRUE</td>
</tr>
<tr>
<td>fileSizeGetter</td>
<td>Object</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>initialCaption</td>
<td>String</td>
<td></td>
<td>''</td>
</tr>
<tr>
<td>initialPreview</td>
<td>Array/Object</td>
<td></td>
<td>[]</td>
</tr>
<tr>
<td>initialPreviewDelimiter</td>
<td>String</td>
<td></td>
<td>'<em>$$</em>'</td>
</tr>
<tr>
<td>initialPreviewAsData</td>
<td>Boolean</td>
<td></td>
<td>FALSE</td>
</tr>
<tr>
<td>initialPreviewFileType</td>
<td>String</td>
<td></td>
<td>'image'</td>
</tr>
<tr>
<td>initialPreviewConfig</td>
<td>Array/Object</td>
<td></td>
<td>[]</td>
</tr>
<tr>
<td>initialPreviewThumbTags</td>
<td>Array/Object</td>
<td></td>
<td>[]</td>
</tr>
<tr>
<td>previewThumbTags</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>initialPreviewShowDelet</td>
<td>e Boolean</td>
<td></td>
<td>TRUE</td>
</tr>
<tr>
<td>removeFromPreviewOnErro</td>
<td>r Boolean</td>
<td></td>
<td>FALSE</td>
</tr>
<tr>
<td>deleteUrl</td>
<td>String</td>
<td>删除图片时的请求路径</td>
<td>''</td>
</tr>
<tr>
<td>deleteExtraData</td>
<td>Object</td>
<td>删除图片时额外传入的参数</td>
<td>{}</td>
</tr>
<tr>
<td>overwriteInitial</td>
<td>Boolean</td>
<td></td>
<td>TRUE</td>
</tr>
<tr>
<td>previewZoomButtonIcons</td>
<td>Object</td>
<td></td>
<td>{</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>prev: '<i class="glyphicon glyphicon-triangle-left"></i>',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> next: '<i class="glyphicon glyphicon-triangle-right"></i>',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> borderless: '<i class="glyphicon glyphicon-resize-full"></i>',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> close: '<i class="glyphicon glyphicon-remove"></i>'</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>},</td>
</tr>
<tr>
<td>previewZoomButtonClasse</td>
<td>s Object</td>
<td></td>
<td>{ </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>prev: 'btn btn-navigate',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> next: 'btn btn-navigate',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> toggleheader: 'btn btn-default btn-header-toggle',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> fullscreen: 'btn btn-default',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> borderless: 'btn btn-default',</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td> close: 'btn btn-default'</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>},</td>
</tr>
<tr>
<td>preferIconicPreview</td>
<td>Boolrean</td>
<td></td>
<td>FALSE</td>
</tr>
<tr>
<td>preferIconicZoomPreview</td>
<td>Boolrean</td>
<td></td>
<td>FALSE</td>
</tr>
<tr>
<td>allowedPreviewTypes</td>
<td>undefined</td>
<td></td>
<td>undefined</td>
</tr>
<tr>
<td>allowedPreviewMimeTypes</td>
<td>Object</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>allowedFileTypes</td>
<td>Object</td>
<td>接收的文件后缀，如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型</td>
<td>null</td>
</tr>
<tr>
<td>allowedFileExtensions</td>
<td>Object</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>defaultPreviewContent</td>
<td>Object</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>customLayoutTags</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>customPreviewTags</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>previewFileIcon</td>
<td>String</td>
<td></td>
<td>'<i class="glyphicon glyphicon-file"></i>'</td>
</tr>
<tr>
<td>previewFileIconClass</td>
<td>String</td>
<td></td>
<td>'file-other-icon'</td>
</tr>
<tr>
<td>previewFileIconSettings</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>previewFileExtSettings</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>buttonLabelClass</td>
<td>String</td>
<td></td>
<td>'hidden-xs'</td>
</tr>
<tr>
<td>browseIcon</td>
<td>String</td>
<td></td>
<td>'<i class="glyphicon glyphicon-folder-open"></i> '</td>
</tr>
<tr>
<td>browseClass</td>
<td>String</td>
<td></td>
<td>'btn btn-primary'</td>
</tr>
<tr>
<td>removeIcon</td>
<td>String</td>
<td></td>
<td>'<i class="glyphicon glyphicon-trash"></i>'</td>
</tr>
<tr>
<td>removeClass</td>
<td>String</td>
<td></td>
<td>'btn btn-default'</td>
</tr>
<tr>
<td>cancelIcon</td>
<td>String</td>
<td></td>
<td>'<i class="glyphicon glyphicon-ban-circle"></i>'</td>
</tr>
<tr>
<td>cancelClass</td>
<td>String</td>
<td></td>
<td>'btn btn-default'</td>
</tr>
<tr>
<td>uploadIcon</td>
<td>String</td>
<td></td>
<td>'<i class="glyphicon glyphicon-upload"></i>'</td>
</tr>
<tr>
<td>uploadClass</td>
<td>String</td>
<td></td>
<td>'btn btn-default'</td>
</tr>
<tr>
<td>uploadUrl</td>
<td>String</td>
<td>上传文件路径</td>
<td>null</td>
</tr>
<tr>
<td>uploadAsync</td>
<td>boolean</td>
<td>是否为异步上传</td>
<td>TRUE</td>
</tr>
<tr>
<td>uploadExtraData</td>
<td></td>
<td>上传文件时额外传递的参数设置</td>
<td>{}</td>
</tr>
<tr>
<td>zoomModalHeight</td>
<td>number</td>
<td></td>
<td>480</td>
</tr>
<tr>
<td>minImageWidth</td>
<td>String</td>
<td>图片的最小宽度</td>
<td>null</td>
</tr>
<tr>
<td>minImageHeight</td>
<td>String</td>
<td>图片的最小高度</td>
<td>null</td>
</tr>
<tr>
<td>maxImageWidth</td>
<td>String</td>
<td>图片的最大宽度</td>
<td>null</td>
</tr>
<tr>
<td>maxImageHeight</td>
<td>String</td>
<td>图片的最大高度</td>
<td>null</td>
</tr>
<tr>
<td>resizeImage</td>
<td>boolean</td>
<td></td>
<td>FALSE</td>
</tr>
<tr>
<td>resizePreference</td>
<td>String</td>
<td></td>
<td>'width'</td>
</tr>
<tr>
<td>resizeQuality</td>
<td>number</td>
<td></td>
<td>0.92</td>
</tr>
<tr>
<td>resizeDefaultImageType</td>
<td>String</td>
<td></td>
<td>'image/jpeg'</td>
</tr>
<tr>
<td>minFileSize</td>
<td>number</td>
<td>单位为kb，上传文件的最小大小值</td>
<td>0</td>
</tr>
<tr>
<td>maxFileSize</td>
<td>number</td>
<td>单位为kb，如果为0表示不限制文件大小</td>
<td>0</td>
</tr>
<tr>
<td>resizeDefaultImageType</td>
<td>number</td>
<td></td>
<td>25600(25MB)</td>
</tr>
<tr>
<td>minFileCount</td>
<td>number</td>
<td>表示同时最小上传的文件个数</td>
<td>0</td>
</tr>
<tr>
<td>maxFileCount</td>
<td>number</td>
<td>表示允许同时上传的最大文件个数</td>
<td>0</td>
</tr>
<tr>
<td>validateInitialCount</td>
<td>boolean</td>
<td></td>
<td>FALSE</td>
</tr>
<tr>
<td>msgValidationErrorClass</td>
<td>String</td>
<td></td>
<td>'text-danger'</td>
</tr>
<tr>
<td>msgValidationErrorIcon</td>
<td>String</td>
<td></td>
<td>'<i class="glyphicon glyphicon-exclamation-sign"></i> '</td>
</tr>
<tr>
<td>msgErrorClass</td>
<td>String</td>
<td></td>
<td>'file-error-message'</td>
</tr>
<tr>
<td>progressThumbClass</td>
<td>String</td>
<td></td>
<td>"progress-bar progress-bar-success progress-bar-striped active"</td>
</tr>
<tr>
<td>rogressClass</td>
<td>String</td>
<td></td>
<td>"progress-bar progress-bar-success progress-bar-striped active"</td>
</tr>
<tr>
<td>progressCompleteClass</td>
<td>String</td>
<td></td>
<td>"progress-bar progress-bar-success"</td>
</tr>
<tr>
<td>progressErrorClass</td>
<td>String</td>
<td></td>
<td>"progress-bar progress-bar-danger"</td>
</tr>
<tr>
<td>progressUploadThreshold</td>
<td>number</td>
<td></td>
<td>99</td>
</tr>
<tr>
<td>previewFileType</td>
<td>String</td>
<td>预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式</td>
<td>'image'</td>
</tr>
<tr>
<td>elCaptionContainer</td>
<td>String</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>elCaptionText</td>
<td>String</td>
<td>设置标题栏提示信息</td>
<td>null</td>
</tr>
<tr>
<td>elPreviewContainer</td>
<td>String</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>elPreviewImage</td>
<td>String</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>elPreviewStatus</td>
<td>String</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>elErrorContainer</td>
<td>String</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>errorCloseButton</td>
<td>String</td>
<td></td>
<td>'<span class="close kv-error-close">×</span>'</td>
</tr>
<tr>
<td>slugCallback</td>
<td>String</td>
<td></td>
<td>null</td>
</tr>
<tr>
<td>dropZoneEnabled</td>
<td>boolean</td>
<td>是否显示拖拽区域</td>
<td>TRUE</td>
</tr>
<tr>
<td>dropZoneTitleClass</td>
<td>String</td>
<td>拖拽区域类属性设置</td>
<td>'file-drop-zone-title'</td>
</tr>
<tr>
<td>fileActionSettings</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>otherActionButtons</td>
<td>String</td>
<td></td>
<td>''</td>
</tr>
<tr>
<td>textEncoding</td>
<td>String</td>
<td>编码设置</td>
<td>'UTF-8'</td>
</tr>
<tr>
<td>ajaxSettings</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>ajaxDeleteSettings</td>
<td>Object</td>
<td></td>
<td>{}</td>
</tr>
<tr>
<td>showAjaxErrorDetails</td>
<td>boolean</td>
<td></td>
<td>TRUE</td>
</tr>
</tbody>
</table>
<h5>3.其他</h5>
<p>GitHub地址：<a href="https://github.com/kartik-v/bootstrap-fileinput/">https://github.com/kartik-v/bootstrap-fileinput/</a>
项目git地址：<a href="https://github.com/kartik-v/bootstrap-fileinput.git">https://github.com/kartik-v/bootstrap-fileinput.git</a></p>