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悬停效果案例应用
Nov 21 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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新手上路(八)
2006/10/09 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
主要的Ajax框架都有什么
2013/11/14 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
统计系教授推荐信
2014/02/28 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
2014年关工委工作总结
2014/11/17 职场文书
六年级学生评语大全
2014/12/26 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
centos7安装mysql5.7经验记录
2022/05/02 Servers