Bootstrap-fileinput文件上传

r囧r小猫 2022-12-31 01:29 256阅读 0赞

最近在页面中需要用到文件上传,自己不是专业整前端的,页面用到了 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

下载完后解压,内容如下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70

js文件夹内

20201227172801497.png

fileinput.js 是源码,.min 是压缩后的文件

locales文件夹中为对应语言的js文件

plugins为辅助插件

一般直接引入 fileinput.min.js,默认语言为英文,可通过引入locales 中对应的 js 文件来改变语言,中文则引入 zh.js

css文件夹内

2020122717310153.png

fileinput.css为默认css

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 1

fileinput-rtl.css,选择框从右到左

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 2

css 一般用默认的就行了

themes文件夹下为主题样式

examples文件夹下为样例,内容为我上面图片所示

环境

既然是bootstrap的插件那么就需要引入bootstrap相关文件

引入 js 文件夹下的 fileinput.min.js 和 js/locales 下的 zh.js

引入 css 文件夹下的 fileinput.min.css

使用

有两种方式初始化

第一种

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 3

引入元素后,class添加file,效果如下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 4

input会被替换成对应的元素

class=’file’将不能被设置为中文

网上有说将class设置为 file-loading可以,亲测无效

第二种

通过jq函数 fileinput 来初始化

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 5

效果如下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 6

上面这种 默认只能单文件上传,比如头像上传等可以使用

一般会将此控件写入模态框里

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 7

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 8

如果需要多文件上传,可以在 input 里加上 multiple

20201228111908873.png

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 9

需要限制上传的类型可以在js中添加

20201228112431519.png

当选择了其他类型

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODA2OTY2_size_16_color_FFFFFF_t_70 10

更多的参数可参考文章末尾

fileinput提供了文件上传的函数,我用此控件是为了简化写页面

对于文件上传流程,可以参考这篇文章 https://shendi.blog.csdn.net/article/details/111415361

最后完善一下demo,用于头像上传

去掉上传按钮,当选择了文件就将对应图片上传,模态框可有可无,看自己需求

  1. <html>
  2. <head>
  3. <meta charset="utf8" />
  4. </head>
  5. <body>
  6. <link rel="stylesheet" href="bootstrap.min.css">
  7. <link rel="stylesheet" href="fileinput.min.css"/>
  8. <script src="jquery-3.5.1.min.js"></script>
  9. <script src="bootstrap.min.js"></script>
  10. <script src='fileinput.min.js'></script>
  11. <script src='zh.js'></script>
  12. <button class="btn btn-primary" data-toggle="modal" data-target="#modal">上传头像</button>
  13. <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="test modal">
  14. <div class="modal-dialog modal-lg" role="document">
  15. <div class="modal-content">
  16. <div class="modal-header">
  17. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  18. <h4 class="modal-title" id="myModalLabel">上传头像</h4>
  19. </div>
  20. <div class="modal-body">
  21. <input type='file' id='file'/>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. <script>
  27. $("#file").fileinput({
  28. // 设置语言,需要引入对应的js文件
  29. language : "zh",
  30. allowedFileExtensions: ['jpg', 'gif', 'png'],
  31. // 去掉上传和删除按钮
  32. showUpload : false,
  33. showRemove : false
  34. })
  35. // 选择文件时触发
  36. .on('filebatchselected', function (event, files) {
  37. // 将文件上传到服务器,具体方法参考 https://shendi.blog.csdn.net/article/details/111415361
  38. console.log(files[0]);
  39. // 上传完成后提示
  40. });
  41. </script>
  42. </body>
  43. </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>&nbsp;’

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”>&times;</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”).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

在预览框中图片已经完全加载完毕后回调的事件

发表评论

表情:
评论列表 (有 0 条评论,256人围观)

还没有评论,来说两句吧...

相关阅读

    相关 php 文件,PHP 文件

    文件上传概述 文件上传功能是网络生活中经常使用的一个功能。使用 PHP 可以很方便的实现文件上传,其具体流程如下: 表单选择文件 -> 检查文件大小及类型 -> 生成临时文

    相关 文件

    文件上传 说明: 文件上传流程 :把request对象封装成fileitem对象存于磁盘或内存,获取ftp服务器地址和端口号,用storeFile方法将字节流写到