1. 全栈程序员必看首页

Bootstrap File Input，最好用的文件上传组件

全栈程序员-用户IM • • 未分类

Bootstrap File Input，最好用的文件上传组件本篇介绍如何使用bootstrapfileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。

大家好，又见面了，我是你们的朋友全栈君。

本篇介绍如何使用 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>

http://plugins.krajee.com/file-input,这是其官方文档，里面有下载地址。

三、在页面上添加组件

<input type="file" name="image" class="projectfile" value="${deal.image}"/>
  1. type=file和class=projectfile，指明其为input file类型。
  2. name指定其在后台的获取key。
  3. value指定其在展示的时候图片路径。

四、初始化

projectfileoptions : { 
   
		showUpload : false,
		showRemove : false,
		language : 'zh',
		allowedPreviewTypes : [ 'image' ],
		allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
		maxFileSize : 2000,
	},
// 文件上传框
$('input[class=projectfile]').each(function() { 
   
	var imageurl = $(this).attr("value");

	if (imageurl) { 
   
		var op = $.extend({ 
   
			initialPreview : [ // 预览图片的设置
			"<img src='" + imageurl + "' class='file-preview-image'>", ]
		}, projectfileoptions);

		$(this).fileinput(op);
	} else { 
   
		$(this).fileinput(projectfileoptions);
	}
});
  1. 通过jquery获取对应的input file，然后执行fileinput方法。
  2. showUpload 设置是否有上传按钮。
  3. language指定汉化
    4. allowedFileTypes 、allowedFileExtensions 不知道为什么没有起到效果？
  4. maxFileSize 指定上传文件大小

五、带file文件的form表单通过ajax提交

我们先来看带file的form表单布局。

<form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutForward" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)">

	<div class="form-group">
		<label for="" class="col-md-1 control-label">项目封面</label>
		<div class="col-md-10 tl th">
			<input type="file" name="image" class="projectfile" value="${deal.image}" />
			<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>
		</div>
	</div>	
	<div class="form-group text-center ">
		<div class="col-md-10 col-md-offset-1">
			<button type="submit" class="btn btn-primary btn-lg">保存</button>
		</div>
	</div>
</form>
  1. enctype=”multipart/form-data”必不可少。
  2. οnsubmit=”return iframeCallback(this, pageAjaxDone)”方法，通过ajax提交表单（iframeCallback），并且上传成功后调用回调函数（pageAjaxDone）进行下一步操作。

关于iframeCallback的介绍，请参照 summernote所在form表单的数据提交，这里就不多做介绍了。

然后我们来介绍一下回调函数pageAjaxDone。

function pageAjaxDone(json) { 
   
	YUNM.debug(json);
	YUNM.ajaxDone(json);

	if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { 
   
		var msg = json[YUNM.keys.message];
		// 弹出消息提示
		YUNM.debug(msg);

		if (YUNM.callbackType.confirmTimeoutForward == json.callbackType) { 
   
			$.showSuccessTimeout(msg, function() { 
   
				window.location = json.forwardUrl;
			});
		}
	}
}

其主要的功能就是通过ajaxDone方法处理服务端传递过来的错误消息，假如说服务端操作成功，那么会显示提示信息，进而跳转到对应的url。

六、服务器端保存图片

请参照后端springMVC文件保存

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”说起，该属性告知我们文件的选择类型，那么我们很容易想到这样的画面：
这里写图片描述

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

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

但请看下图：
这里写图片描述

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

②、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的内容。

  1. 也就是说当我们指定allowedFileTypes: ['image'],时，就会进行image的类型检查。
  2. 显然我们选择的txt文件不属于image类型，那么就会匹配不上，出现以上界面。
  3. 同时，该方法告诉我们，当不指定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的图片就会出现错误提示。
这里写图片描述

错误预期的发生了，那么请特别注意：

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，我只是为了举例说明，代码做了调整，请注意！

好了，老铁，能否来个 2 连：

1、为本文点赞，让更多的小伙伴看到这篇文章。
2、微信搜索「沉默王二」，关注后回复关键字「666」可以获得一份 500G 的高清教学视频，Bootstrap 也有哟。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/133692.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • pycharm中mysql连接失败_pycharm连接mysql数据库连接不上[通俗易懂]

    pycharm中mysql连接失败_pycharm连接mysql数据库连接不上[通俗易懂]

    pycharm中mysql连接失败_pycharm连接mysql数据库连接不上[通俗易懂]代码其实很简单，只有一小段，是在pycharm上运行的，所用的python版本为2.7，mysql版本为5.7.21#-*-coding:UTF-8-*-importreimportMySQLdbif__name__==’__main__’:#打开数据库conn=MySQLdb.connect(host=’localhost’,port=3306,user=’root’,pa…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月30日
  • sql server数据库置疑_数据库置疑什么原因

    sql server数据库置疑_数据库置疑什么原因

    sql server数据库置疑_数据库置疑什么原因一、数据库置疑产生的原因1、SQLServer所在分区空间是否足够，数据库文件大小是否达到最大文件限制，FAT32事务格式只支持4G以内的文件？2、数据库文件损坏或被非正常删除时会出现这种情况；3、病毒防火墙的扫面也可能会引起数据库置疑；4、当SQLServer启动时，将会尝试获得对数据库文件的排他访问权，如果此时该文件被其他程序占用，或者遗失，数据库将会被标记为置疑；5、电脑非法关机也可能会造…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月20日
  • Java——JDBC连接数据库（步骤详解！！！）

    Java——JDBC连接数据库（步骤详解！！！）

    Java——JDBC连接数据库（步骤详解！！！）JDBC的全称是：JavaDatabaseConnectivity，即Java数据库连接。JDBC可以通过载入不同的数据库的“驱动程序”而与不同的数据库进行连接。那么，在数据库连接的时候，我使用的是MySQL，Java集成开发环境是Eclipse。要使用JDBC来访问MySQL数据库，首先需要添加MySQL数据库驱动程序。下面，我来为大家讲解一下这其中的步骤（听着名字很高大上，但仔细看步骤会觉得其实没那么难！！！）????????????Step1：www.mysql.co

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月26日
  • 简单倒计时代码(html时间倒计时代码)

    简单倒计时代码(html时间倒计时代码)

    大家好，又见面了，我是你们的朋友全栈君。

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月15日
  • 两列向量正交有什么性质线性代数_线性代数正交化怎么算

    两列向量正交有什么性质线性代数_线性代数正交化怎么算

    两列向量正交有什么性质线性代数_线性代数正交化怎么算正交向量　　正交是垂直的令一种说法，两个向量正交意味着两个向量的夹角是90°。　　这可以用直角三角形的三边解释：　　当x和y正交时，二者的点积是0，反过来也一样。这个结论在n维空间也适用，当Rn空间内的两个向量x和向量y正交时：　　如果x是零向量，xTy还是0，也意味着零向量和任意向量正交。正交子空间　　正交性还可以推广到子空间，如果说一个子空间V和另一个子空间W…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年11月1日
  • mysql导入excel文件_将Excel数据导入MySQL「建议收藏」

    mysql导入excel文件_将Excel数据导入MySQL「建议收藏」

    mysql导入excel文件_将Excel数据导入MySQL「建议收藏」去年的投资统计月报数据量庞大，原始表格是xls格式(还是EXECL2003的)，单个sheet最大只能放几万行，但数据总量有10万行以上，于是只能存成两个sheet。EXECL2010格式倒是单个sheet可以放得下，可是居然不能将数据完整的从一个sheet复制粘贴到另一个sheet(可能是因为行数太多)。正好想学习一下execl数据导入MySQL数据库的方法，于是开始尝试。一开始使用的是MySQ…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月2日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号