|
BootStrap FileInput
BootStrap FileInput是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性。 BootStrap FileInput样式设计的非常美观，功能也很齐全。是一款很好用的上传组件。之前也用过Layui的上传组件，这两款上传组件平分秋色，各有各的特点，总而言之，都是很实用而且很美观的上传组件，想了解Layui上传组件的请移步：Layui上传组件的使用
先来看一下效果图
选择后  查看详情，可以放大，全屏预览。  选择多张图片 
引入插件的样式文件
插件下载地址：https://github.com/kartik-v/bootstrap-fileinput
在页面上添加input标签
可以通过input标签外的div设置组件显示的大小。type=“file”，指明其为input file类型。name指定其在后台的接收参数的key。id=“file”，通过id选中DOM元素，对上传组件进行渲染。multiple，这个属性很重要，如果没有这个属性，渲染上传组件时，有些属性没有效果，下面有说明。
通过JS渲染初始化上传组件
$('#file').fileinput({
language: 'zh', //设置语言
dropZoneEnabled: true, //是否显示拖拽区域
dropZoneTitle: "可以将图片拖放到这里", //拖拽区域显示文字
uploadUrl: 'file/imgSave', //上传路径
allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'], //指定上传文件类型
maxFileSize: 0,
maxFileSize: 2048, //上传文件最大值，单位kb
uploadAsync: true, //异步上传
maxFileCount: 2 //上传文件最大个数。
}).on("fileuploaded", function(event,data) { //异步上传成功后回调
console.log(data); //data为返回的数据
});
关于Fileinput的属性这里只设置了部分，下面有Fileinput的全部属性，可以参考根据项目需求添加。 其中maxFileCount属性设置上传文件上限，如果input标签中没有multiple属性，则没有效果。多图片上传，点击上传时会发送多次请求。 uploadAsync设置上传方式，异步上传，点击上传按钮后在上传。同步上传，选择完图片后就上传。 allowedFileExtensions指定上传文件的类型，BootStrap FileInput 可以效验文件类型，如果不是指定类型则给出提示。  uploadUrl设置上传路径，也就是服务器保存图片后台对应的方法代码如下。
@RequestMapping(value = "imgSave")
@ResponseBody
public Map imgSave(MultipartFile file){
Map map = new HashMap();
try{
String uuid = UUID.randomUUID().toString()+".jpg";
Boolean bool = fileService.saveFile(file, uuid);
map.put("result", bool);
map.put("msg", "上传成功");
return map;
}catch (Exception e){
map.put("result", false);
map.put("msg", "上传失败");
return map;
}
}
其中saveFile方法是文件保存方法，代码如下。上传成功返回true，失败则返回false。
// 图片存放位置
private final static String IMAGEPATH="E:\\bootstrap\\image";
//保存图片
@Transactional
public boolean saveFile(MultipartFile file, String uuid){
try{
File path = path(file.getContentType());
String filename = file.getOriginalFilename();
SysFile fileEntity = new SysFile();
fileEntity.setFileName(filename);
fileEntity.setUuid(uuid);
String storeaddress = path.getAbsolutePath();
fileEntity.setStoreaddress(storeaddress);
File saveFile = new File(path,uuid);
try {
fileRepository.save(fileEntity);
file.transferTo(saveFile);
return true;
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
return false;
}
}catch (Exception e){
System.out.println("图片保存异常");
return false;
}
}
//图片地址是否存在
private File path(String filename) {
File pat=new File("E:\\bootstrap");
File path=new File(SysFileService.IMAGEPATH);
if(!pat.isDirectory()) {
pat.mkdir();
}
if(!path.isDirectory()) {
path.mkdir();
}
return path;
}
图片上传完成后返回的函数回调数据。包含一些图片上传信息以及后台返回信息。  上传完成后效果 
Fileinput的更多属性
性名属性类型描述说明默认值languageString多语言设置，使用时需提前引入locales文件夹下对应的语言文件，中文zh，引入语言文件必须放在fileinput.js之后‘en’showCaptionBoolean是否显示被选文件的简介trueshowBrowseBoolean是否显示浏览按钮trueshowPreviewBoolean是否显示预览区域trueshowRemoveBoolean是否显示移除按钮trueshowUploadBoolean是否显示上传按钮trueshowCancelBoolean是否显示取消按钮trueshowCloseBoolean是否显示关闭按钮trueshowUploadedThumbsBooleantruebrowseOnZoneClickBooleanfalseautoReplaceBoolean是否自动替换当前图片，设置为true时，再次选择文件， 会将当前的文件替换掉。falsegenerateFileIdObjectnullpreviewClassString添加预览按钮的类属性“”captionClassString“”frameClassString‘krajee-default’mainClassString‘file-caption-main’mainTemplateObjectnullpurifyHtmlBooleantruefileSizeGetterObjectnullinitialCaptionString“”initialPreviewArray/Object[]initialPreviewDelimiterString‘$$’initialPreviewAsDataBooleanfalseinitialPreviewFileTypeString‘image’initialPreviewConfigArray/Object[]initialPreviewThumbTagsArray/Object[]previewThumbTagsObject{}initialPreviewShowDeleteBooleantrueremoveFromPreviewOnErrorBooleanfalsedeleteUrlString删除图片时的请求路径‘’deleteExtraDataObject删除图片时额外传入的参数{}overwriteInitialBooleantruepreviewZoomButtonIconsObject{prev: ‘’,next: ‘’,toggleheader: ‘’,fullscreen: ‘’,borderless: ‘’,close: ‘’}previewZoomButtonClassesObject{prev: ‘btn btn-navigate’,next: ‘btn btn-navigate’,toggleheader: ‘btn btn-default btn-header-toggle’,fullscreen: ‘btn btn-default’,borderless: ‘btn btn-default’,close: ‘btn btn-default’}preferIconicPreviewBoolreanfalsepreferIconicZoomPreviewBoolreanfalseallowedPreviewTypesundefinedundefinedallowedPreviewMimeTypesObjectnullallowedFileTypesObject接收的文件后缀，如[‘jpg’, ‘gif’, ‘png’],不填将不限制上传文件后缀类型nullallowedFileExtensionsObjectnulldefaultPreviewContentObjectnullcustomLayoutTagsObject{}customPreviewTagsObject{}previewFileIconString‘’previewFileIconClassString‘file-other-icon’previewFileIconSettingsObject{}previewFileExtSettingsObject{}buttonLabelClassString‘hidden-xs’browseIconString’ ’browseClassString‘btn btn-primary’removeIconString‘’removeClassString‘btn btn-default’cancelIconString‘’cancelClassString‘btn btn-default’uploadIconString‘’uploadClassString‘btn btn-default’uploadUrlString上传文件路径nulluploadAsyncboolean是否为异步上传trueuploadExtraDataObject上传文件时额外传递的参数设置{}zoomModalHeightnumber480minImageWidthString图片的最小宽度nullminImageHeightString图片的最小高度nullmaxImageWidthString图片的最大宽度nullmaxImageHeightString图片的最大高度nullresizeImagebooleanfalseresizePreferenceString‘width’resizeQualitynumber0.92resizeDefaultImageTypeString‘image/jpeg’minFileSizenumber单位为kb，上传文件的最小大小值0maxFileSizenumber单位为kb，如果为0表示不限制文件大小0resizeDefaultImageTypenumber25600(25MB)minFileCountnumber表示同时最小上传的文件个数0maxFileCountnumber表示允许同时上传的最大文件个数0validateInitialCountbooleanfalsemsgValidationErrorClassString‘text-danger’msgValidationErrorIconString’ ’msgErrorClassString‘file-error-message’progressThumbClassString“progress-bar progress-bar-success progress-bar-striped active”rogressClassString“progress-bar progress-bar-success progress-bar-striped active”progressCompleteClassString“progress-bar progress-bar-success”progressErrorClassString“progress-bar progress-bar-danger”progressUploadThresholdnumber99previewFileTypeString预览文件类型,内置[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’,‘other‘]等格式‘image’elCaptionContainerStringnullelCaptionTextString设置标题栏提示信息nullelPreviewContainerStringnullelPreviewImageStringnullelPreviewStatusStringnullelErrorContainerStringnullerrorCloseButtonString‘×’slugCallbackfunction选择后未上传前回调方法nulldropZoneEnabledboolean是否显示拖拽区域truedropZoneTitleClassString拖拽区域类属性设置‘file-drop-zone-title’fileActionSettingsObject设置预览图片的显示样式{showRemove: true,showUpload: false,showZoom: true,showDrag: true,removeIcon: ‘’,removeClass: ‘btn btn-xs btn-default’,removeTitle: ‘Remove file’,uploadIcon: ‘’,uploadClass: ‘btn btn-xs btn-default’,uploadTitle: ‘Upload file’,zoomIcon: ‘’,zoomClass: ‘btn btn-xs btn-default’,zoomTitle: ‘View Details’,dragIcon: ‘’,dragClass: ‘text-info’,dragTitle: ‘Move / Rearrange’,dragSettings: {},indicatorNew: ‘’,indicatorSuccess: ‘’,indicatorError: ‘’,indicatorLoading: ‘’,indicatorNewTitle: ‘Not uploaded yet’,indicatorSuccessTitle: ‘Uploaded’,indicatorErrorTitle: ‘Upload Error’,indicatorLoadingTitle: ‘Uploading …’}otherActionButtonsString‘’textEncodingString编码设置‘UTF-8’ajaxSettingsObject{}ajaxDeleteSettingsObject{}showAjaxErrorDetailsbooleantrue
关于BootStrap FileInput的使用就这些了，有不足之处欢迎家指出。
|