当前位置博文首页 > Shendi：Bootstrap-fileinput文件上传

最大化缩小

Shendi：Bootstrap-fileinput文件上传

作者：[db:作者] 时间：2021-07-18 22:24

最近在页面中需要用到文件上传，自己不是专业整前端的，页面用到了 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">&times;</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 上一篇：杰瑞IC验证的博客：水果与盘子的随机问题？怎么搞下一篇：没有了立即下载 - IIS7 站长工具包最新更多<< Shendi：Bootstrap-fileinput文件上传杰瑞IC验证的博客：水果与盘子的随机问题？怎么搞 any、fork-join_none有什么用？_杰瑞IC验证的博客：fork-join挺杰瑞IC验证的博客：约束里“：=”和“：/”傻傻分不清楚？今天彻杰瑞IC验证的博客：妙用合并数组杰瑞IC验证的博客：a[0+:8] 、b [15-:8] 什么意思？怎么用？杰瑞IC验证的博客：$test$plusargs(),$value$plusargs()怎么用？空手道丶大师兄的博客：关于从键盘键入数据的笔记空手道丶大师兄的博客：指针的用法空手道丶大师兄的博客：C笔记空手道丶大师兄的博客：IOC控制反转和AOP面向切面化编程空手道丶大师兄的博客：JVM原理空手道丶大师兄的博客：shiro笔记空手道丶大师兄的博客：Mybatis多表查询及结果封装 lzh_2_4的博客：各种笔记小狐狸FM的博客：C# 类库dll的创建和使用小狐狸FM的博客：C# 数据类型转换小狐狸FM的博客：C# 结构体的创建和使用小狐狸FM的博客：C# 字符串比较小狐狸FM的博客：不用第三个变量，实现两数调换小狐狸FM的博客：Unity(5)-解决Input类无法识别的问题小狐狸FM的博客：Unity(6)-通过脚本修改图片sprite 小狐狸FM的博客：C# 委托小狐狸FM的博客：Unity(7)-控制2D物体移动小狐狸FM的博客：Unity(8)-开启或关闭背景音乐小狐狸FM的博客：Unity(9)-TileMap瓦片地图小狐狸FM的博客：Unity(10)-OnGUI界面小狐狸FM的博客：Python-移位密码、仿射变换解密小狐狸FM的博客：Java-IO流实验小狐狸FM的博客：Python-分角色登录界面（tkinter、pymysql）推荐更多<< Lua编程示例（三）：稀疏表、双端队列、格式化输出、表和循环表 python使用新浪微博api上传图片到微博示例 golang切片内存应用技巧详解 WwW.iis7.CoM

Shendi：Bootstrap-fileinput文件上传

作者：[db:作者] 时间：2021-07-18 22:24

下载

环境

使用

API

最新 更多<<

推荐 更多<<

Shendi：Bootstrap-fileinput文件上传

作者：[db:作者] 时间：2021-07-18 22:24

下载

环境

使用

API

最新 更多<<

推荐 更多<<

最新更多<<

推荐更多<<