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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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版 汉字转码的实现详解
2013/06/09 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
Python高效编程技巧
2013/01/07 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python实现的RSS阅读器实例
2015/07/25 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
python3 map函数和filter函数详解
2019/08/26 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python中有帮助函数吗
2020/06/19 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
eBay美国官网:eBay.com
2020/10/24 全球购物
三月雷锋月活动总结
2014/07/03 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2019年入党思想汇报
2019/03/25 职场文书