Bootstrap File Input文件上传组件


Posted in HTML / CSS onDecember 01, 2020

本篇介绍如何使用 Bootstrap File Input(最好用的文件上传组件)来进行图片的展示、上传,以及如何在服务器端进行文件保存。

一、先来看效果图吧

Bootstrap File Input文件上传组件

Bootstrap File Input文件上传组件
Bootstrap File Input文件上传组件

二、引入插件的样式和脚本

<link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" />
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput_locale_zh.js"></script>

ps:以上博客留了一个小疑问,一直没有去研究,直到有位非常棒的小伙伴 ihchenchen 给了我如下的提醒:

allowedFileTypes 、allowedFileExtensions 我知道为什么没有效果,因为 fileinput() 方法调用了两次,一次在 fileinput.js 里面最后几行,还有一次就是你自己写的 $(this).fileinput()。在fileinput.js里的是没有设置allowedFileTypes 、allowedFileExtensions 值的。

有两种方法可以改:
1、把fileinput.js里的最后几行调用注释掉。
2、全部使用“data-”的方法来做,不写$(this).fileinput()。

对于ihchenchen善意的提醒,我非常的感谢,虽然他提供的解释并没有解决我的疑问,但是我很喜欢这样有互动的技术交流,之前写很多博客,基本上很少发生这样善意并且行之有效的回答。这让我想起中国程序员和外国程序员,里面的故事让人震撼之余,捎带着些许的惭愧。那么如何做到“Ask questions, get answers, no distractions。”就显得特别珍贵,而“ihchenchen”则充满这种精神!

六、解惑allowedFileTypes 、allowedFileExtensions

之前困惑为什么bootstrap fileinput为什么设置了这两个属性后,没有效果,其实是我自己的误解,如今经过一番痛彻的领悟后恍然大悟!

①、allowedFileTypes

allowedFileTypes
array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found, then a validation error message as set in msgInvalidFileType will be raised. The following types as set in fileTypeSettings are available for setup.

[‘image’, ‘html’, ‘text’, ‘video’, ‘audio’, ‘flash’, ‘object’]

先从“allowedFileTypes”说起,该属性告知我们文件的选择类型,那么我们很容易想到这样的画面:
 

Bootstrap File Input文件上传组件

也就是说,我们希望此时的“所有文件”处不是“所有文件”,而是“image”之类的。显然这样的逻辑并没有错,但却不适合bootstrap fileinput!

那么,这个时候我就很容易认为“allowedFileTypes” 没有起到作用!

但请看下图:

Bootstrap File Input文件上传组件

吼吼,原来是在你选择了文件后发生的类型检查!

②、allowedFileTypes工作原理

$(this).fileinput({
				showUpload : false,
				showRemove : false,
				language : 'zh',
				allowedPreviewTypes: ['image'],
		        allowedFileTypes: ['image'],
		        allowedFileExtensions:  ['jpg', 'png'],
				maxFileSize : 2000,
				
			});

通过fileinput方法我们加载一个bootstrap fileinput组件,那么其内部是如何实现allowedFileTypes的呢?

通过在fileinput.js文件中搜索“allowedFileTypes”关键字,我们得到如下代码:

var node = ctr + i, previewId = previewInitId + "-" + node, isText, file = files[i],
                    caption = self.slug(file.name), fileSize = (file.size || 0) / 1000, checkFile, fileExtExpr = '',
                    previewData = objUrl.createObjectURL(file), fileCount = 0, j, msg, typ, chk,
                    fileTypes = self.allowedFileTypes, strTypes = isEmpty(fileTypes) ? '' : fileTypes.join(', '),
                    fileExt = self.allowedFileExtensions, strExt = isEmpty(fileExt) ? '' : fileExt.join(', ');

然后我们继续看到如下的代码:

if (!isEmpty(fileTypes) && isArray(fileTypes)) {
                    for (j = 0; j < fileTypes.length; j += 1) {
                        typ = fileTypes[j];
                        checkFile = settings[typ];
                        chk = (checkFile !== undefined && checkFile(file.type, caption));
                        fileCount += isEmpty(chk) ? 0 : chk.length;
                    }
                    if (fileCount === 0) {
                        msg = self.msgInvalidFileType.replace('{name}', caption).replace('{types}', strTypes);
                        self.isError = throwError(msg, file, previewId, i);
                        return;
                    }
                }

我们可以发现,文件类型的检查是发生在checkFile方法上,那么checkFile方法到底做了些什么呢?

defaultFileTypeSettings = {
        image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
        },
        ...

以上就是checkFile的内容。

也就是说当我们指定allowedFileTypes: ['image'],时,就会进行image的类型检查。显然我们选择的txt文件不属于image类型,那么就会匹配不上,出现以上界面。同时,该方法告诉我们,当不指定allowedFileTypes: ['image'],,只指定allowedFileExtensions: ['jpg', 'png'],就会执行vName.match(/\.(png|jpe?g)$/i),也就是文件后缀类型的检查,这点很关键啊,为我们接下来介绍“allowedFileExtensions”奠定基础。 ③、allowedFileExtensions什么时候起作用

上节我们讨论完“allowedFileTypes”,捎带说了“allowedFileExtensions”,那么如何让后缀进行check呢?

$(this).fileinput({
				showUpload : false,
				showRemove : false,
				language : 'zh',
				allowedPreviewTypes: ['image'],
		        allowedFileExtensions:  ['jpg', 'png'],
				maxFileSize : 2000,
				
			});

fileinput组件此时指定的属性如上,没有了“allowedFileTypes”,并且指定允许的后缀类型为“[‘jpg’, ‘png’]”,也就是说,假如我们选择了gif的图片就会出现错误提示。

Bootstrap File Input文件上传组件

错误预期的发生了,那么请特别注意:

image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
        },

fileinput.js文件中原始的代码如下:

image: function (vType, vName) {
            return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
        },

image类型的后缀当然默认包含了gif,我只是为了举例说明,代码做了调整,请注意!

到此这篇关于Bootstrap File Input文件上传组件的文章就介绍到这了,更多相关Bootstrap File Input文件上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 #HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 #HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 #HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 #HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 #HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 #HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 #HTML / CSS
You might like
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
一份比较全的PHP面试题
2016/07/29 面试题
项目专员岗位职责
2013/12/04 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
初中生期末评语大全
2014/04/24 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers