使用插件Bootstrap Fileinput文件上传
最近的项目中有用到这个插件，觉得功能挺强大的。
GitHub地址：https://github.com/kartik-v/bootstrap-fileinput/
git地址：https://github.com/kartik-v/bootstrap-fileinput.git
类似的效果如下图：
一、载入
需要载入样式：
以及js：
（这是语言包，有很多种可以选）
二、 初始化设置：
$("#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: "
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
}).on("fileuploaded", function (event, data, previewId, index){
});
三、 Options 说明：
| 属性名 |
属性类型 |
描述说明 |
默认值 |
| 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: '', next: '', toggleheader: '', fullscreen: '', borderless: '', close: '' }, |
| 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 |
|
'' |
| previewFileIconClass |
String |
|
'file-other-icon' |
| previewFileIconSettings |
Object |
|
{} |
| previewFileExtSettings |
Object |
|
{} |
| buttonLabelClass |
String |
|
'hidden-xs' |
| browseIcon |
String |
|
' ' |
| browseClass |
String |
|
'btn btn-primary' |
| removeIcon |
String |
|
'' |
| removeClass |
String |
|
'btn btn-default' |
| cancelIcon |
String |
|
'' |
| cancelClass |
String |
|
'btn btn-default' |
| uploadIcon |
String |
|
'' |
| 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 |
|
' ' |
| 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 |
|
'×' |
| slugCallback |
String |
|
null |
| dropZoneEnabled |
boolean |
是否显示拖拽区域 |
true |
| dropZoneTitleClass |
String |
拖拽区域类属性设置 |
'file-drop-zone-title' |
| fileActionSettings |
Object |
设置预览图片的显示样式 |
{ 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 ...' } |
| otherActionButtons |
String |
|
'' |
| textEncoding |
String |
编码设置 |
'UTF-8' |
| ajaxSettings |
Object |
|
{} |
| ajaxDeleteSettings |
Object |
|
{} |
| showAjaxErrorDetails |
boolean |
|
true |
四、 提示说明设置：
| 属性名 |
默认值 |
中文 |
| fileSingle |
file |
文件 |
| filePlural |
files |
个文件 |
| browseLabel |
Browse &hellip |
选择 … |
| removeLabel |
Remove |
移除 |
| removeTitle |
Clear selected files |
清除选中文件 |
| cancelLabel |
Cancel |
取消 |
| cancelTitle |
Abort ongoing upload |
取消进行中的上传 |
| uploadLabel |
Upload |
上传 |
| uploadTitle |
Upload selected files |
上传选中文件 |
| msgNo |
No |
没有 |
| msgNoFilesSelected |
No files selected |
“” |
| msgCancelled |
Cancelled |
取消 |
| msgZoomModalHeading |
Detailed Preview |
详细预览 |
| msgSizeTooSmall |
File "{name}" ({size} KB) is too small and must be larger than {minSize} KB. |
File "{name}" ({size} KB) is too small and must be larger than {minSize} KB. |
| msgSizeTooLarge |
File "{name}" ({size} KB) exceeds maximum allowed upload size of {maxSize} KB. |
文件 "{name}" ({size} KB) 超过了允许大小 {maxSize} KB. |
| msgFilesTooLess |
You must select at least {n} {files} to upload. |
你必须选择最少 {n} {files} 来上传. |
| msgFilesTooMany |
Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}. |
选择的上传文件个数 ({n}) 超出最大文件的限制个数 {m}. |
| msgFileNotFound |
File "{name}" not found! |
文件 "{name}" 未找到! |
| msgFileSecured |
Security restrictions prevent reading the file "{name}". |
安全限制，为了防止读取文件 "{name}". |
| msgFileNotReadable |
File "{name}" is not readable. |
文件 "{name}" 不可读. |
| msgFilePreviewAborted |
File preview aborted for "{name}". |
取消 "{name}" 的预览. |
| msgFilePreviewError |
An error occurred while reading the file "{name}". |
读取 "{name}" 时出现了一个错误. |
| msgInvalidFileName |
Invalid or unsupported characters in file name "{name}". |
Invalid or unsupported characters in file name "{name}". |
| msgInvalidFileType |
Invalid type for file "{name}". Only "{types}" files are supported. |
不正确的类型 "{name}". 只支持 "{types}" 类型的文件. |
| msgInvalidFileExtension |
Invalid extension for file "{name}". Only "{extensions}" files are supported. |
不正确的文件扩展名 "{name}". 只支持 "{extensions}" 的文件扩展名. |
| msgFileTypes |
{ 'image': 'image', 'html': 'HTML', 'text': 'text', 'video': 'video', 'audio': 'audio', 'flash': 'flash', 'pdf': 'PDF', 'object': 'object' }, |
{ 'image': 'image', 'html': 'HTML', 'text': 'text', 'video': 'video', 'audio': 'audio', 'flash': 'flash', 'pdf': 'PDF', 'object': 'object' }, |
| msgUploadAborted |
The file upload was aborted |
该文件上传被中止 |
| msgUploadThreshold |
Processing... |
Processing... |
| msgUploadBegin |
Initializing... |
Initializing... |
| msgUploadEnd |
Done |
Done |
| msgUploadEmpty |
No valid data available for upload. |
No valid data available for upload. |
| msgValidationError |
Validation Error |
验证错误 |
| msgLoading |
Loading file {index} of {files} … |
加载第 {index} 文件 共 {files} … |
| msgProgress |
Loading file {index} of {files} - {name} - {percent}% completed. |
加载第 {index} 文件 共 {files} - {name} - {percent}% 完成. |
| msgSelected |
{n} {files} selected |
{n} {files} 选中 |
| msgFoldersNotAllowed |
Drag & drop files only! {n} folder(s) dropped were skipped. |
只支持拖拽文件! 跳过 {n} 拖拽的文件夹. |
| msgImageWidthSmall |
Width of image file "{name}" must be at least {size} px. |
宽度的图像文件的"{name}"的必须是至少{size}像素. |
| msgImageHeightSmall |
Height of image file "{name}" must be at least {size} px. |
图像文件的"{name}"的高度必须至少为{size}像素. |
| msgImageWidthLarge |
Width of image file "{name}" cannot exceed {size} px. |
宽度的图像文件"{name}"不能超过{size}像素. |
| msgImageHeightLarge |
Height of image file "{name}" cannot exceed {size} px. |
图像文件"{name}"的高度不能超过{size}像素. |
| msgImageResizeError |
Could not get the image dimensions to resize. |
无法获取的图像尺寸调整。 |
| msgImageResizeException |
Error while resizing the image. {errors} |
错误而调整图像大小。 {errors} |
| msgAjaxError |
Something went wrong with the {operation} operation. Please try again later! |
Something went wrong with the {operation} operation. Please try again later! |
| msgAjaxProgressError |
{operation} failed |
{operation} failed |
| ajaxOperations |
{ deleteThumb: 'file delete', uploadThumb: 'file upload', uploadBatch: 'batch file upload', uploadExtra: 'form data upload' }, |
{ deleteThumb: 'file delete', uploadThumb: 'file upload', uploadBatch: 'batch file upload', uploadExtra: 'form data upload' }, |
| dropZoneTitle |
Drag & drop files here … |
拖拽文件到这里 … |
| dropZoneClickTitle |
|
|
| previewZoomButtonTitles |
{ prev: 'View previous file', next: 'View next file', toggleheader: 'Toggle header', fullscreen: 'Toggle full screen', borderless: 'Toggle borderless mode', close: 'Close detailed preview' } |
{ prev: '预览上一个文件', next: '预览下一个文件', toggleheader: '缩放', fullscreen: '全屏', borderless: '无边界模式', close: '关闭当前预览' } |
| fileActionSettings |
|
{ removeTitle: '删除文件', uploadTitle: '上传文件', zoomTitle: '查看详情', dragTitle: '移动 / 重置', indicatorNewTitle: '没有上传', indicatorSuccessTitle: '上传', indicatorErrorTitle: '上传错误', indicatorLoadingTitle: '上传 ...' }, |
五、 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").
|
| filereset |
|
|
| fileclear |
|
点击浏览框右上角X 清空文件前响应事件 $("#fileinput").on("fileclear",function(event, data, msg){ }); |
| filecleared |
|
点击浏览框右上角X 清空文件后响应事件 $("#fileinput").on("filecleared",function(event, data, msg){ }); |
| fileimageuploaded |
|
在预览框中图片已经完全加载完毕后回调的事件 |
六、 常见错误：
(1) 当点击上传后，报错，提示你必须选择最少X个文件上传。
错误原因:html中input标签元素属性：data-min-file-count="2" 设置为X个文件，限制上传文件数。