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 相关文章推荐
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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)
2010/09/04 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
smarty表格换行实例
2014/12/15 PHP
php设计模式之委托模式
2016/02/13 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
js 操作css实现代码
2009/06/11 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
工业自动化毕业生自荐信范文
2014/01/04 职场文书
文艺演出策划方案
2014/06/07 职场文书
担保书范文
2015/01/20 职场文书
学校教师培训工作总结
2015/10/14 职场文书
python实现简单的三子棋游戏
2022/04/28 Python