最好用的Bootstrap fileinput.js文件上传组件


Posted in Javascript onDecember 12, 2016

本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。

一、demo

最好用的Bootstrap fileinput.js文件上传组件

最好用的Bootstrap fileinput.js文件上传组件

二、插件引入

<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 不知道为什么没有起到效果?
5. maxFileSize 指定上传文件大小

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

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

<form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutForward" 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−”的方法来做,不写(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 fileinput.js文件上传组件

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

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

但请看下图:

最好用的Bootstrap fileinput.js文件上传组件

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

②、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 fileinput.js文件上传组件

错误预期的发生了,那么请特别注意:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
使用js画图之画切线
Jan 12 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
jQuery Ajax File Upload实例源码
Dec 12 #Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 #Javascript
layer实现弹窗提交信息
Dec 12 #Javascript
详解Javascript数据类型的转换规则
Dec 12 #Javascript
设置jquery UI 控件的大小方法
Dec 12 #Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 #Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 #Javascript
You might like
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php解决约瑟夫环示例
2014/04/09 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
linux下安装easy_install的方法
2013/02/10 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python文件操作基本流程代码实例
2017/12/11 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
python绘制分布折线图的示例
2020/09/24 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
HTML5 Web 存储详解
2016/09/16 HTML / CSS
计算s=f(f(-1.4))的值
2014/05/06 面试题
诚信考试承诺书
2014/03/27 职场文书
服务承诺口号
2014/05/22 职场文书
政府法律服务方案
2014/06/14 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
主婚人致辞精选
2015/07/28 职场文书
会计主管竞聘书
2015/09/15 职场文书
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技