目录
前言
最近写上传file用过好几次这个插件,每次都记不住,这里记录一下。
fileinput官方git地址:https://github.com/kartik-v/bootstrap-fileinput/tree/master
这里根据分支下需要的fileinput版本就行。
bootstrap官方下载地址: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(添加)
<script th:inile="javascript">
var carouselImgs = [] ;
// 协会图片介绍
$("#carousel_img").fileinput({
uploadUrl: "/uploadFile/img",
language: 'zh',
allowedFileExtensions: ["jpg", "png", "gif"],
dropZoneEnabled:false,
showClose:false,
showCaption: false,
maxFileCount:10,
showRemove:false,
uploadAsync: true,
enctype: 'multipart/form-data',
validateInitialCount:true,
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
fileActionSettings:{
showRemove: true,
showUpload: false,
showDownload: true,
},
previewSettings: {
image: {width: "200px", height: "160px"},
},
overwriteInitial: false,
}).on("fileuploaded", function(event, data, previewId, index) {
var fileName = data.response.data;
$("#"+previewId).attr("fileName", fileName) ;
carouselImgs.push(fileName) ;
$("#carousel_imgs_hidden").val(carouselImgs) ;
}).on("filesuccessremove", function(event, previewId, extra) {
var fileName = $("#"+previewId).attr("fileName");
var newCarouselImgs = [] ;
for (var i = 0; i < carouselImgs.length; i++) {
if (carouselImgs[i] != fileName)
newCarouselImgs.push(carouselImgs[i]);
}
carouselImgs = newCarouselImgs ;
$("#carousel_imgs_hidden").val(carouselImgs) ;
})/*.on('filebatchselected', function(event, files) {
// 选中文件自动上传
$('#carousel_img').fileinput('upload');
})*/;
</script>
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(回显)
<script th:inline="javascript">
var carouselImgs = [] ;
// 获取协会图片介绍
var initialPreviews = [[${foPlatePage.carouselImgs}]] == null ? [] :
[[${foPlatePage.carouselImgs}]].split(",") ;
var initialPreview = [] ;
var initialPreviewConfig = [] ;
for (var i = 0; i < initialPreviews.length; i++) {
var fileName = initialPreviews[i] ;
if (fileName != null && fileName !=''){
var delImg = new Object() ;
delImg.caption = fileName ;
delImg.url = "/uploadFile/delImg?fileName=" + fileName ;
initialPreview.push("/admin/showImg?fileName="+ fileName) ;
initialPreviewConfig.push(delImg) ;
carouselImgs.push(fileName) ;
}
}
$("#carousel_imgs_hidden").val(carouselImgs) ;
// 协会图片介绍
$("#carousel_img").fileinput({
uploadUrl: "/uploadFile/img",
language: 'zh',
allowedFileExtensions: ["jpg", "png", "gif"],
dropZoneEnabled:false,
showClose:false,
showCaption: false,
maxFileCount:10,
showRemove:false,
uploadAsync: true,
enctype: 'multipart/form-data',
validateInitialCount:true,
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
fileActionSettings:{
showRemove: true,
showUpload: false,
showDownload: true,
},
previewSettings: {
image: {width: "200px", height: "160px"},
},
overwriteInitial: false,
initialPreviewAsData: true,
initialPreviewFileType: 'image',
initialPreview:initialPreview,
initialPreviewConfig:initialPreviewConfig
}).on("fileuploaded", function(event, data, previewId, index) {
var fileName = data.response.data;
$("#"+previewId).attr("fileName", fileName) ;
carouselImgs.push(fileName) ;
$("#carousel_imgs_hidden").val(carouselImgs) ;
}).on("filesuccessremove", function(event, previewId, extra) {
var fileName = $("#"+previewId).attr("fileName");
var newCarouselImgs = [] ;
for (var i = 0; i < carouselImgs.length; i++) {
if (carouselImgs[i] != fileName)
newCarouselImgs.push(carouselImgs[i]);
}
carouselImgs = newCarouselImgs ;
$("#carousel_imgs_hidden").val(carouselImgs) ;
}).on('filedeleted', function(event, key, data) {
var fileName = $.parseJSON(data.responseText).data ;
var newCarouselImgs = [] ;
for (var i = 0; i < carouselImgs.length; i++) {
if (carouselImgs[i] != fileName)
newCarouselImgs.push(carouselImgs[i]);
}
carouselImgs = newCarouselImgs ;
$("#carousel_imgs_hidden").val(carouselImgs) ;
})/*.on('filebatchselected', function(event, files) {
// 选中文件自动上传
$('#carousel_img').fileinput('upload');
})*/;
</script>
上述代码就是上传图片的相关代码了,个别点说明一下。
fileuploaded
当图片上传成功之后回调的函数,这里回传了一个data。
通过data.response就可以拿到接口返回的数据。我返回的是{"code":0,"data":"xxx/xxx"}
所以我获取返回值是data.response.data
filesuccessremove
当图片成功删除之后回调的函数,比方说用户传了10张图片,这里删除了第5张图片,
就可以根据回调参数“previewId”来知道删除的是哪张图片,继而删除或者执行业务逻辑操作。
上传视频
html
<tr>
<td>视频:</td>
<td>
<input type="file" name="videoFileAddress" class="uploadfile" accept="mp4,avi,dat,3gp,mov,rmvb"/>
</td>
</tr>
js
<script th:inile="javascript">
$(".uploadfile").fileinput({
dropZoneTitle : "请上传小于150M的视频!",
uploadUrl : "invitation/saveVideoAddress",
language : "zh",
autoReplace : true,
showCaption : false,
showUpload : false,
showPreview:true,
maxFileCount : 1,
maxFileSize : 153600,
initialPreviewShowDelete : false,
showRemove : false,
showClose : false,
allowedFileExtensions : [ "mp4","avi","dat","3gp","mov","rmvb"],
previewSettings : {
image : {
width : "100%",
height : "100%"
},
},
fileActionSettings : {
removeIcon:'',
removeClass:'',
zoomIcon : '',
zoomClass: '',
}
}).on("fileuploaded", function(event, data, previewId, index) {
$("#fileAddress").val(data.response.videoAddress) ;
}).on("filesuccessremove", function(event, previewId, extra) {
$("#fileAddress").val('') ;
}).on('filebatchselected', function(event, files) {
// 选中文件自动上传
$('.uploadfile').fileinput('upload');
});
</script>
其他剩余代码就是上传的java相关代码了,跟上传图片类似,就不贴了。
资料
fileinput所有属性作用以及详细说明官方地址:http://plugins.krajee.com/file-input/plugin-options#top
option选项说明:
属性名
属性类型
描述说明
默认值
language
String
多语言设置,使用时需提前引入\locales文件夹下对应的语言文件,
中文zh,引入语言文件必须放在fileinput.js之后
'en'
showCaption
Boolean
是否显示被选文件的简介
true
showBrowse
Boolean
是否显示浏览按钮
true
showPreview
Boolean
是否显示预览区域
true
showRemove
Boolean
是否显示移除按钮
true,
showUpload
Boolean
是否显示上传按钮
true,
showCancel
Boolean
是否显示取消按钮
true,
showClose:
Boolean
是否显示关闭按钮
true
showUploadedThumbs
Boolean
true
browseOnZoneClick
Boolean
false
autoReplace
Boolean
是否自动替换当前图片,设置为true时,再次选择文件,
会将当前的文件替换掉。
false
generateFileId
Object
null
previewClass
String
添加预览按钮的类属性
‘’
captionClass
String
‘’
frameClass
String
'krajee-default'
mainClass
String
'file-caption-main'
mainTemplate
Object
null
purifyHtml
Boolean
true
fileSizeGetter
Object
null
initialCaption
String
''
initialPreview
Array/Object
[]
initialPreviewDelimiter
String
'*$$*'
initialPreviewAsData
Boolean
false
initialPreviewFileType
String
'image'
initialPreviewConfig
Array/Object
[]
initialPreviewThumbTags
Array/Object
[]
previewThumbTags
Object
{}
initialPreviewShowDelete
Boolean
true
removeFromPreviewOnError
Boolean
false
deleteUrl
String
删除图片时的请求路径
''
deleteExtraData
Object
删除图片时额外传入的参数
{}
overwriteInitial
Boolean
true
previewZoomButtonIcons
Object
{
prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
next: '<i class="glyphicon glyphicon-triangle-right"></i>',
toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
close: '<i class="glyphicon glyphicon-remove"></i>'
},
previewZoomButtonClasses
Object
{
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'
},
preferIconicPreview
Boolrean
false
preferIconicZoomPreview
Boolrean
false
allowedPreviewTypes
undefined
undefined
allowedPreviewMimeTypes
Object
null
allowedFileTypes
Object
接收的文件后缀,如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型
null
allowedFileExtensions
Object
null
defaultPreviewContent
Object
null
customLayoutTags
Object
{}
customPreviewTags
Object
{}
previewFileIcon
String
'<i class="glyphicon glyphicon-file"></i>'
previewFileIconClass
String
'file-other-icon'
previewFileIconSettings
Object
{}
previewFileExtSettings
Object
{}
buttonLabelClass
String
'hidden-xs'
browseIcon
String
'<i class="glyphicon glyphicon-folder-open"></i> '
browseClass
String
'btn btn-primary'
removeIcon
String
'<i class="glyphicon glyphicon-trash"></i>'
removeClass
String
'btn btn-default'
cancelIcon
String
'<i class="glyphicon glyphicon-ban-circle"></i>'
cancelClass
String
'btn btn-default'
uploadIcon
String
'<i class="glyphicon glyphicon-upload"></i>'
uploadClass
String
'btn btn-default'
uploadUrl
String
上传文件路径
null
uploadAsync
boolean
是否为异步上传
true
uploadExtraData
上传文件时额外传递的参数设置
{}
zoomModalHeight
number
480
minImageWidth
String
图片的最小宽度
null
minImageHeight
String
图片的最小高度
null
maxImageWidth
String
图片的最大宽度
null
maxImageHeight
String
图片的最大高度
null
resizeImage
boolean
false
resizePreference
String
'width'
resizeQuality
number
0.92
resizeDefaultImageType
String
'image/jpeg'
minFileSize
number
单位为kb,上传文件的最小大小值
0
maxFileSize
number
单位为kb,如果为0表示不限制文件大小
0
resizeDefaultImageType
number
25600(25MB)
minFileCount
number
表示同时最小上传的文件个数
0
maxFileCount
number
表示允许同时上传的最大文件个数
0
validateInitialCount
boolean
false
msgValidationErrorClass
String
'text-danger'
msgValidationErrorIcon
String
'<i class="glyphicon glyphicon-exclamation-sign"></i> '
msgErrorClass
String
'file-error-message'
progressThumbClass
String
"progress-bar progress-bar-success progress-bar-striped active"
rogressClass
String
"progress-bar progress-bar-success progress-bar-striped active"
progressCompleteClass
String
"progress-bar progress-bar-success"
progressErrorClass
String
"progress-bar progress-bar-danger"
progressUploadThreshold
number
99
previewFileType
String
预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式
'image'
elCaptionContainer
String
null
elCaptionText
String
设置标题栏提示信息
null
elPreviewContainer
String
null
elPreviewImage
String
null
elPreviewStatus
String
null
elErrorContainer
String
null
errorCloseButton
String
'<span class="close kv-error-close">×</span>'
slugCallback
String
暂时没有搜到说明,调试显示,在文件选择后会调到这个方法。
null
dropZoneEnabled
boolean
是否显示拖拽区域
true
dropZoneTitleClass
String
拖拽区域类属性设置
'file-drop-zone-title'
fileActionSettings
Object
{}
otherActionButtons
String
''
textEncoding
String
编码设置
'UTF-8'
ajaxSettings
Object
{}
ajaxDeleteSettings
Object
{}
showAjaxErrorDetails
boolean
true
Method说明:
方法名
参数
描述
fileerror
异步上传错误结果处理
$('#uploadfile').on('fileerror', function(event, data, msg) {
});
fileuploaded
异步上传成功结果处理
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
})
filebatchuploaderror
同步上传错误结果处理
$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {
});
filebatchuploadsuccess
同步上传成功结果处理
$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
});
filebatchselected
选择文件后处理事件
$("#fileinput").on("filebatchselected", function(event, files) {
});
upload
文件上传方法
$("#fileinput").fileinput("upload");
fileuploaded
上传成功后处理方法
$("#fileinput").
on(
"fileuploaded", function(event, data, previewId, index) {
});
filereset
fileclear
点击浏览框右上角X 清空文件前响应事件
$("#fileinput").on("fileclear",function(event, data, msg){
});
filecleared
点击浏览框右上角X 清空文件后响应事件
$("#fileinput").on("filecleared",function(event, data, msg){
});
fileimageuploaded
在预览框中图片已经完全加载完毕后回调的事件
对你有帮助的话,右上角给个赞呗~