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

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

一、demo

 

二、插件引入

<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>
  • 1
  • 2
  • 3

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

三、页面

<input type="file" name="image" class="projectfile" value="${deal.image}"/>
  • 1

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  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;
            });
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

其主要的功能就是通过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”说起，该属性告知我们文件的选择类型，那么我们很容易想到这样的画面： 

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

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

但请看下图： 

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

②、allowedFileTypes工作原理

            $(this).fileinput({
                showUpload : false,
                showRemove : false,
                language : ‘zh‘,
                allowedPreviewTypes: [‘image‘],
                allowedFileTypes: [‘image‘],
                allowedFileExtensions:  [‘jpg‘, ‘png‘],
                maxFileSize : 2000,

            });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

通过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(‘, ‘);
  • 1
  • 2
  • 3
  • 4
  • 5

然后我们继续看到如下的代码：

 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;
                    }
                }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

我们可以发现，文件类型的检查是发生在checkFile方法上，那么checkFile方法到底做了些什么呢？

 defaultFileTypeSettings = {
        image: function (vType, vName) {
            return (vType !== undefined) ? vType.match(‘image.*‘) : vName.match(/\.(png|jpe?g)$/i);
        },
        ...
  • 1
  • 2
  • 3
  • 4
  • 5

以上就是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,

            });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

fileinput组件此时指定的属性如上，没有了“allowedFileTypes”，并且指定允许的后缀类型为“[‘jpg’, ‘png’]”，也就是说，假如我们选择了gif的图片就会出现错误提示。 

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

image: function (vType, vName) {
            return (vType !== undefined) ? vType.match(‘image.*‘) : vName.match(/\.(png|jpe?g)$/i);
        },
  • 1
  • 2
  • 3

fileinput.js文件中原始的代码如下：

 image: function (vType, vName) {
            return (vType !== undefined) ? vType.match(‘image.*‘) : vName.match(/\.(gif|png|jpe?g)$/i);
        },
  • 1
  • 2
  • 3

image类型的后缀当然默认包含了gif，我只是为了举例说明，代码做了调整，请注意！

转：http://blog.csdn.net/qing_gee/article/details/48949701

时间： 2024-03-02 23:39:57

Bootstrap fileinput.js，最好用的文件上传组件的相关文章

JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

原文:JS组件系列--Bootstrap文件上传组件:bootstrap fileinput 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:

js 实现 input file 文件上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1

Atitit..文件上传组件选型and最佳实践总结(2)----断点续传

Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定义断点续传控件要实现的指标 2 5. 断点续传实现协议ftp/http/ rmi 等选型.. 2 6. 断点续传实现方式activex,plugin,,applet,  Flash ,能不能实现断点续传?? 3 7. Missing required permissions manifest att

异步文件上传组件 Uploader

Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘宝网,比如退款系统.爱逛街.二手.拍卖.我的淘宝.卖家中心.导购中心等. Uploader的特性 支持ajax.flash.iframe三种方案,兼容所有浏览器.(iframe不推荐使用) 多主题支持,可以自己定制主题 丰富的插件支持 支持多选批量上传 支持上传进度显示 支持取消上传 支持图片预览(

jQuery.uploadify文件上传组件实例讲解

1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

1.6 文件上传组件

1.6 文件上传组件1.6.1 基本形制<input type="file" name="myfile"/> 1.6.2 常用属性1.6.2.1 类型typetype="file"说明这个控件是一个文件上传组件,由一个文本框和一个按钮组合而成. 1.6.2.2 名称namename是文件上传组件名,是后台服务器负责处理文件的部分与前台上传组件联系的唯一途径. 前台需要通过它告知后台,后台需要它了解前台. 详情请参考1.6.4.1中&l

HTML5文件上传组件美化jQuery插件

简要教程 jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件.它的特点还有: 对文件上传File Input组件进行美化 支持多文件上传 支持校验文件:大小,扩展名等 支持创建文件的缩略图 每种类型的文件可以自定义图标 可以为缩略图,图标和input自定义模板和主题 可以移出已选择的文件 可以从剪切板粘贴图片 所有的图标在一个字体文件中 支持文件拖

vue大文件上传组件选哪个好?

需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分,这部分代码封装在bjui-all.js文件中, 在bjui-all.js文件中的全局变量定义中有以下

ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件，并在文件上传后清空文件

前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了一个和之前类似的文件选择上传的需求,不过这次是需要手动点击按钮把文件上传到服务器中进行数据导入,而且最多只能够选择一个文件进行上传,上传成功后需要对file-list中的文件列表数据进行清空操作,在这里服务端使用的是ASP.NET Core WEB API来进行文件流数据接收和保存. 一.简单概述e