Bootstrap-fileinput文件上传
最近在页面中需要用到文件上传,自己不是专业整前端的,页面用到了 bootstrap 所以随便找了个插件使用
下载
通过百度直接搜索 bootstrap-fileinput 就可以看到 github 所在地址
也可以直接点击下方链接进入选择版本下载
https://github.com/kartik-v/bootstrap-fileinput/releases
5.1.3版本,也是我用到的版本 https://github.com/kartik-v/bootstrap-fileinput/releases/tag/v5.1.3
下载完后解压,内容如下
js文件夹内
fileinput.js 是源码,.min 是压缩后的文件
locales文件夹中为对应语言的js文件
plugins为辅助插件
一般直接引入 fileinput.min.js,默认语言为英文,可通过引入locales 中对应的 js 文件来改变语言,中文则引入 zh.js
css文件夹内
fileinput.css为默认css
fileinput-rtl.css,选择框从右到左
css 一般用默认的就行了
themes文件夹下为主题样式
examples文件夹下为样例,内容为我上面图片所示
环境
既然是bootstrap的插件那么就需要引入bootstrap相关文件
引入 js 文件夹下的 fileinput.min.js 和 js/locales 下的 zh.js
引入 css 文件夹下的 fileinput.min.css
使用
有两种方式初始化
第一种
引入元素后,class添加file,效果如下
input会被替换成对应的元素
class=’file’将不能被设置为中文
网上有说将class设置为 file-loading可以,亲测无效
第二种
通过jq函数 fileinput 来初始化
效果如下
上面这种 默认只能单文件上传,比如头像上传等可以使用
一般会将此控件写入模态框里
如果需要多文件上传,可以在 input 里加上 multiple
需要限制上传的类型可以在js中添加
当选择了其他类型
更多的参数可参考文章末尾
fileinput提供了文件上传的函数,我用此控件是为了简化写页面
对于文件上传流程,可以参考这篇文章 https://shendi.blog.csdn.net/article/details/111415361
最后完善一下demo,用于头像上传
去掉上传按钮,当选择了文件就将对应图片上传,模态框可有可无,看自己需求
<html>
<head>
<meta charset="utf8" />
</head>
<body>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="fileinput.min.css"/>
<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src='fileinput.min.js'></script>
<script src='zh.js'></script>
<button class="btn btn-primary" data-toggle="modal" data-target="#modal">上传头像</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="test modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">上传头像</h4>
</div>
<div class="modal-body">
<input type='file' id='file'/>
</div>
</div>
</div>
</div>
<script>
$("#file").fileinput({
// 设置语言,需要引入对应的js文件
language : "zh",
allowedFileExtensions: ['jpg', 'gif', 'png'],
// 去掉上传和删除按钮
showUpload : false,
showRemove : false
})
// 选择文件时触发
.on('filebatchselected', function (event, files) {
// 将文件上传到服务器,具体方法参考 https://shendi.blog.csdn.net/article/details/111415361
console.log(files[0]);
// 上传完成后提示
});
</script>
</body>
</html>
API
属性名 | 属性类型 | 描述说明 | 默认值 |
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 |
7、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 | 在预览框中图片已经完全加载完毕后回调的事件 |
还没有评论,来说两句吧...