文档章节

bootstrap-fileinput使用配置

hezhongjie
 hezhongjie
发布于 2017/04/30 18:04
字数 1996
阅读 887
收藏 0
点赞 0
评论 0
<div class="content">
      <input multiple class="" id="uploadFile5" type="file" value="选择图片">
</div>

注:控件生产的结构都会在content容器中这效果图

  • 控件初始化和基本配置:
$(".content").fileinput(  language: 'en',
        showCaption: true,
        showBrowse: true,
        showPreview: true,
        showRemove: true,
        showUpload: true,
        showCancel: true,
        showClose: true,
        showUploadedThumbs: true,
        browseOnZoneClick: false,
        autoReplace: false,
        generateFileId: null,
        previewClass: '',
        captionClass: '',
        frameClass: 'krajee-default',
        mainClass: 'file-caption-main',
        mainTemplate: null,
        purifyHtml: true,
        fileSizeGetter: null,
        initialCaption: '',
        initialPreview: [],
        initialPreviewDelimiter: '*$$*',
        initialPreviewAsData: false,
        initialPreviewFileType: 'image',
        initialPreviewConfig: [],
        initialPreviewThumbTags: [],
        previewThumbTags: {},
        initialPreviewShowDelete: true,
        removeFromPreviewOnError: false,
        deleteUrl: '',
        deleteExtraData: {},
        overwriteInitial: true,
        previewZoomButtonIcons: {
            prev: '<i class="glyphicon glyphicon-triangle-left"></i>',
            next: '<i class="glyphicon glyphicon-triangle-right"></i>',
            toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',
            fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',
            borderless: '<i class="glyphicon glyphicon-resize-full"></i>',
            close: '<i class="glyphicon glyphicon-remove"></i>'
        },
        previewZoomButtonClasses: {
            prev: 'btn btn-navigate',
            next: 'btn btn-navigate',
            toggleheader: 'btn btn-default btn-header-toggle',
            fullscreen: 'btn btn-default',
            borderless: 'btn btn-default',
            close: 'btn btn-default'
        },
        preferIconicPreview: false,
        preferIconicZoomPreview: false,
        allowedPreviewTypes: undefined,
        allowedPreviewMimeTypes: null,
        allowedFileTypes: null,
        allowedFileExtensions: null,
        defaultPreviewContent: null,
        customLayoutTags: {},
        customPreviewTags: {},
        previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
        previewFileIconClass: 'file-other-icon',
        previewFileIconSettings: {},
        previewFileExtSettings: {},
        buttonLabelClass: 'hidden-xs',
        browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>&nbsp;',
        browseClass: 'btn btn-primary',
        removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
        removeClass: 'btn btn-default',
        cancelIcon: '<i class="glyphicon glyphicon-ban-circle"></i>',
        cancelClass: 'btn btn-default',
        uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
        uploadClass: 'btn btn-default',
        uploadUrl: null,
        uploadAsync: true,
        uploadExtraData: {},
        zoomModalHeight: 480,
        minImageWidth: null,
        minImageHeight: null,
        maxImageWidth: null,
        maxImageHeight: null,
        resizeImage: false,
        resizePreference: 'width',
        resizeQuality: 0.92,
        resizeDefaultImageType: 'image/jpeg',
        resizeIfSizeMoreThan: 0, // in KB
        minFileSize: 0,
        maxFileSize: 0,
        maxFilePreviewSize: 25600, // 25 MB
        minFileCount: 0,
        maxFileCount: 0,
        validateInitialCount: false,
        msgValidationErrorClass: 'text-danger',
        msgValidationErrorIcon: '<i class="glyphicon glyphicon-exclamation-sign"></i> ',
        msgErrorClass: 'file-error-message',
        progressThumbClass: "progress-bar progress-bar-success progress-bar-striped active",
        progressClass: "progress-bar progress-bar-success progress-bar-striped active",
        progressCompleteClass: "progress-bar progress-bar-success",
        progressErrorClass: "progress-bar progress-bar-danger",
        progressUploadThreshold: 99,
        previewFileType: 'image',
        elCaptionContainer: null,
        elCaptionText: null,
        elPreviewContainer: null,
        elPreviewImage: null,
        elPreviewStatus: null,
        elErrorContainer: null,
        errorCloseButton: '<span class="close kv-error-close">&times;</span>',
        slugCallback: null,
        dropZoneEnabled: true,
        dropZoneTitleClass: 'file-drop-zone-title',
        fileActionSettings: {},
        otherActionButtons: '',
        textEncoding: 'UTF-8',
        ajaxSettings: {},
        ajaxDeleteSettings: {},
        showAjaxErrorDetails: true
    };

//这是插件中的所有的配置选项及其默认值.
//下面是常用的几个配置项
/*{
            language: 'zh',                      //语言格式(默认为英文,若设置为中文或其他语言,需引入语言js)
            uploadUrl: 'url',
            allowedFileExtensions: [],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,                 //是否显示标题(即文件名称)  
            showPreview: true,                 //是否显示拖拽区
            maxFileCount: 0, //表示允许同时上传的最大文件个数
            uploadExtraData:, //向后台传递的参数
            showAjaxErrorDetails: false,         //上传失败后,是否显示返回的信息
            ajaxSettings:{             //配置回调函数
           beforeSend: fnBefore,
                success: fnSuccess,
                complete: fnComplete,
                error: fnError
            }
}*/
)

此时,基本功能都已有,接下来就是根据自己的需求对其进行更进一步的配置

  • 提交过程中的常用事件和jQuery中的很接近,有filereset, fileclear, filecleared, fileloaded, and fileerror.(可以像jquery中那样,书写注册事件,因为函数返回的还是控件本身,所以可以链式调用)

  • 支持的各种文件类型,内置的类型有: image, text, html, video, audio, flash, object, and other.

  • 预览文件的默认类型有:['image', 'html', 'text', 'video', 'audio', 'flash', 'object']

    你可以自定义,如 allowedPreviewTypes: ['images','html'] 注:当将allowedPreviewTypes: 设置为 null,空,或者false时,预览图将都是相同的一个小图标.

  • 自定义 预览图的大小(宽和高,下面是插件默认的值) 如:previewSettings:{ image: {width: "auto", height: "160px"}, html: {width: "213px", height: "160px"}, text: {width: "213px", height: "160px"}, video: {width: "auto", height: "100%", 'max-width': "100%"}, audio: {width: "100%", height: "30px"}, flash: {width: "auto", height: "100%", 'max-width': "100%"}, object: {height: "100%"}, pdf: {width: "160px", height: "160px"}, other: {width: "160px", height: "160px"}}

  • 提交方式有两种 ;表单提交和基于ajax的提交 (Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.) 若想要使用ajax上传文件,必须设置uploadUrl属性,否则将默认使用form表单提交:

      uploadUrl:'我的url地址'
    
  • 返回的数据应为json类型

  • 上传类型:上传异步还是同步(默认是异步):

    uploadAsync :true 异步时每个文件发送一次ajax;同步上传时,ajax只触发一次

  • 传递参数的方法:传递参数,有两种方式:

    a.初始化时就确定数据:uploadExtraData:{id:1}

    b.动态获取参数并传递:

第一步,方法外定义参数:

    var  mydata

第二步,配置中:

        uploadExtraData: function () {
            	return mydata
        	},

第三步,

$(".fileinput").on("filepreajax", function (event, data) {
   uploadExtraData ={
      	 id:$(".someInput").val()   //此时可以动态获取
     };
})
  • minImageHeight,maxImageHeight,minImageWidth,maxImageWidth:

    对上传图片的宽高进行限制(px为单位); minFileSize ,maxFileSize 对上传文件的大小进行限制(kb为单位)

  • 常用函数配置(推荐使用插件的回调函数): change , fileselect ,filereset, fileclear, filecleared, fileloaded, fileerror 和jquery的回调函数很像,依次是: 文件选中后的事件,文件选中事件, input框重置事件, 当input框中的remove按钮或预览窗口的关闭按钮按下时的事件, 文件在预览框被清除事件,文件上传成功的事件:(参数较多,有function(event, file, previewId, index, reader),上传时验证失败的函数

  • 插件支持事件(亲自测试过的):

          fileuploaded(event,data , previewId , index):上传并完成时触发(无论是点击的哪个按钮)
    
          filebatchuploadsuccess(event,data,previewId,index):当点击input的上传时(多文件上传),触发此事件   所以文件上传成功时触发(只在同步上传时,且所有文件上传成功)
    
          filebatchuploadcomplete(event,files,extra):当点击input的上传时(无论是否是多文件上传),触发此事件 (亲测不对 多文件上传结束后触发,无论异步还是同步)
    
          filesuccessremove(event,id)  :点击删除预览框中的删除按钮前触发( 已上传成功的文件 )
    
          filepreremove(event,id,index):点击删除预览框中的删除按钮前触发( initialPreview中的文件除外,只针对于还未上传的文件 )  //id=文件容器的id  , index=文件容器的index
    
          fileuploaderror(event,data,msg):选中文件后未通过验证时触发及取消正在上传的文件,可用于限制文件大小类型等
    
      注:a. filepreajax > filepreupload > fileuploaded> filebatchuploadcomplete
    
         b.(多文件) filepreajax(多次触发) > filepreupload > fileuploaded(多次触发) > filebatchuploadcomplete
    

}

  • 插件支持的方法:

    disable,将file input框置为不可用($('#input-id').fileinput('disable').fileinput('enable'))

    ,enable ,可用

    reset , 重置

    destroy, 取消对此input 的初始化(将其变为一个普通的input框)

    refresh, 刷新input

    clear :清除提交的记录

    ,upload :触发input的上传

    ,cancel ,:取消正在上传的ajax

    lock:锁定按钮,取消按钮除外

    unlock,

    addToStack :将一个文件加进缓存文件栈(必须传递一个文件对象)

    ,updateStack :用一个文件替换掉缓存文件栈中的一个文件$

    clearStack:清空文件栈

    getFileStack :返回一个已选中文件列表

    getFilesCount ,

    zoom,

    getPreview

  • 展示页面加载时,数据库已存在的图片(及删除的接口和传递的参数)

    { initialPreview: [ "http://lorempixel.com/1920/1080/nature/1", "http://lorempixel.com/1920/1080/nature/2", "http://lorempixel.com/1920/1080/nature/3", ], initialPreviewConfig: [{ caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //删除接口 或者deleteUrl, key: 1, extra: {id: 100}, }, { caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //删除接口 或者deleteUrl key: 1, extra: {id: 100}, }, { caption: "nature-1.jpg", size: 329892, width: "120px", url: "", //删除接口 或者deleteUrl key: 1, extra: {id: 100}, }, ], }

  • 自己在使用的时候遇到的问题????:

    1. 删除图片: 情景: 当我上传成功一个图片后,发现图片上传错了,想立马把他删除掉,但是我当点击删除按钮时,获取到数据是包裹当前图片的一个元素对象的id名

    问题: 但是,预览框中的包裹图片的元素对象的id名竟然有些是一样的(大概是这样:id = 'upload-1244565476567'),(很诡异),所以根据id名我仍无法确定到当前要删除文件,望哪位大神指点迷津,将十分感谢 . . .

2017-05-13:补充:针对第一个问题,搜过作者的论坛后,初步得出答案,每当有文件上传成功后,都将上传控件destroy,然后马上再次的初始化,并将服务器中的所以图片的信息通过 initailPreview配置,默认的显示在页面中,这样所以的图片的删除动作使用的都是initailPreviewConfig中的url进行删除. 若有哪个地方理解的有误,或者对此插件有熟练的使用,还请大神指点迷津,将十分感谢 . . .

© 著作权归作者所有

共有 人打赏支持
hezhongjie
粉丝 2
博文 29
码字总数 41381
作品 0
程序员
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1、bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web...

walb呀 ⋅ 2017/12/04 ⋅ 0

Spring Boot 写的一个图床 - file-manager

开源图床: 出于自用的目的,又找不到Java写的开源的程序,然后使用开源上传组件 bootstrap-fileinput 用 Spring Boot 写了一个图床,目前支持:七牛云,阿里云 Configuration 使用的时候需要...

鹏磊 ⋅ 2017/12/10 ⋅ 1

bootstrap+fileinput插件实现可预览上传照片功能

图片.png bootstrap-fileinput.css文件:(github目前正在维护中,之后所有代码上传至我的github) bootstrap-fileinput.js: 欢迎关注!欢迎通过公众号咨询专业问题,我会尽力回复!...

祈澈姑娘 ⋅ 01/22 ⋅ 0

bootstrap 文件上传插件 fileinput.min.js 可以预览图片

特性:bootstrap 文件上传插件 fileinput.min.js 可以预览图片 文档 documenthttp://plugins.krajee.com/file-input demohttp://plugins.krajee.com/file-basic-usage-demo githttp://githu......

大灰狼wow ⋅ 2016/04/22 ⋅ 0

bootstrap-fileinput和jquery-ui 冲突问题

统一个页面同时使用bootstrap-fileinput和jquery-ui,fileinput插件的upload按钮和remove按钮不能正常显示,有没有遇到的朋友,或者提供一下js冲突的解决方法。 下面是对比图,只要在页面中移...

科尔沁鹰隼 ⋅ 2016/12/07 ⋅ 3

bootstrap fileupload记录

本来是准备学习bootstrap的,想写个文件上传的demo,但是百度了半天,最终也没有找到想要的内容,现在把学习过程中的资料纪录一下,以便使用: js下载: 地址是:https://github.com/kartik...

创意顽石 ⋅ 2015/12/29 ⋅ 0

yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的...

白狼栈 ⋅ 2016/06/23 ⋅ 0

bootstrao 插件引入问题

我是想要引入bootstrap-fileinput 插件,但是遇到瓶颈。最为一个小白,不知道如何解决。 package.json中引入了 此插件的版本, 第一张图是项目也引入了相关的 JS和CSS,第二张图是控制台看到...

垨候 ⋅ 2016/04/07 ⋅ 0

javaer/ssmbootstrap_table

ssmbootstrap_table demo 技术栈/technology stack spring+springmvc+mybatis poi3 自定义标签开发 bootstrap3/bootstrap-fileinput/jquery.fileupload bootstrap-table1.9 druid fastjson w......

javaer ⋅ 2016/03/08 ⋅ 0

JeeWeb敏捷开发平台/jeeweb-mybatis

JeeWeb敏捷开发平台(Mybatis) QQ交流群: 570062301(满)、522959928 官方网站: https://www.jeeweb.cn 文档地址: https://doc.jeeweb.cn 项目演示: https://mybatis.jeeweb.cn 简介 JeeW...

JeeWeb敏捷开发平台 ⋅ 2017/07/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

分布式数据库中间件DDM的实现原理

随着数据量不断增大,传统的架构模式难以解决业务量不断增长所带来的问题,特别是在业务成线性、甚至指数级上升的情况。此时我们不得不通过水平扩展,把数据库放到不同服务器上来解决问题,也...

中间件小哥 ⋅ 14分钟前 ⋅ 0

字符编码那点事:快速理解ASCII、Unicode、GBK和UTF-8

原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享。 1、引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料。 这个问题比我想象的复杂,午饭...

JackJiang- ⋅ 20分钟前 ⋅ 0

Spring Cloud构建微服务架构:服务消费(基础)

使用LoadBalancerClient 在Spring Cloud Commons中提供了大量的与服务治理相关的抽象接口,包括DiscoveryClient、这里我们即将介绍的LoadBalancerClient等。对于这些接口的定义我们在上一篇介...

itcloud ⋅ 21分钟前 ⋅ 0

MaxCompute产品最新进展 -- 从马力到计算力

摘要:本文从马力作为功率衡量标准为切入点,介绍了大数据领域的计算力衡量标准TPCBB以及MaxCompute2.0在Big Bench上的卓越表现。同时详细地分享了取得优异成绩背后的产品在最新有哪些进展,...

猫耳m ⋅ 21分钟前 ⋅ 0

Linux系统

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Linux系统: Unix:是C语言转做出来的,最早的网...

凯哥学堂 ⋅ 21分钟前 ⋅ 0

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

13.1 设置更改root密码 启动MySQL数据库 [root@linux-10 ~]# /etc/init.d/mysqld startStarting MySQL SUCCESS! 由于MySQL的相关命令的所在路径不在系统的环境变量中,因此需要将路径添...

影夜Linux ⋅ 24分钟前 ⋅ 0

jeesite shiro+redis实现cache和session共享

jeesite这个开源框架本身集成的有shiro+redis来实现cache和session共享,但是需要修改一下文件配置即可 首先找到spring-context-shiro.xml文件 找到bean id为sessionDAO,将其修改为如下 <!...

wangxujun59 ⋅ 24分钟前 ⋅ 0

基本JNI搭建

1、编写Java代码 首先我们需要编写自己的java代码 public class Hello { static{ System.loadLibrary("hello-jni"); } public native String sayHello();} 2、把...

国仔饼 ⋅ 26分钟前 ⋅ 0

MaxCompute产品最新进展 -- 从马力到计算力

摘要:本文从马力作为功率衡量标准为切入点,介绍了大数据领域的计算力衡量标准TPCBB以及MaxCompute2.0在Big Bench上的卓越表现。同时详细地分享了取得优异成绩背后的产品在最新有哪些进展,...

阿里云云栖社区 ⋅ 30分钟前 ⋅ 0

AppDelegate 设置Root相关

self.window = UIWindow.init(frame: UIScreen.main.bounds) self.window?.backgroundColor = UIColor.white self.window?.makeKeyAndVisible() self.window?.rootViewController = RootTabB......

west_zll ⋅ 38分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部