本篇介绍如何使用bootstrap fileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。
一、demo
二、插件引入
<link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/fileinput.js">
<script type="text/javascript" src="/UploadFiles/2021-04-02/fileinput_locale_zh.js">
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 不知道为什么没有起到效果？
5. maxFileSize 指定上传文件大小
五、带file文件的form表单通过ajax提交
我们先来看带file的form表单布局。
<form class="form-horizontal required-validate" action="${ctx}/save" enctype="multipart/form-data" method="post" onsubmit="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.onsubmit=”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保存图片
请参照后端springMVC文件保存
ps：以上博客留了一个小疑问，一直没有去研究，直到有位非常棒的小伙伴给了我如下的提醒：
ihchenchen昨天 13:42发表 [回复] allowedFileTypes 、allowedFileExtensions 我知道为什么没有效果，因为fileinput()方法调用了两次，一次在fileinput.js里面最后几行，还有一次就是你自己写的(this).fileinput()。在fileinput.js里的是没有设置allowedFileTypes、allowedFileExtensions值的。有两种方法可以改：1、把fileinput.js里的最后几行调用注释掉。2、全部使用“data"nofollow" target="_blank" href="http://www.jianshu.com/p/90a19c5d5cf0">中国程序员和外国程序员，里面的故事让人震撼之余，捎带着些许的惭愧。那么如何做到“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) "htmlcode">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) "htmlcode">defaultFileTypeSettings = { image: function (vType, vName) { return (vType !== undefined) "color: #800000">③、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) "htmlcode">image: function (vType, vName) { return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i); },image类型的后缀当然默认包含了gif，我只是为了举例说明，代码做了调整，请注意！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？