bootstrap fileinput 插件使用项目总结(经验)

2024-09-28 03:20:36

基础的定义及使用方法网上有很多不再概述，这儿主要写本人所使用项目时碰到的一些问题及解决方案

注：本人使用此插件主要用来上传图片之用，插件其他上传文件没有涉及

一、上传最小数量问题

通过查阅其他资料可知配置中有两个方法

minFileCount:4,//表示允许同时上传的最小文件个数
maxFileCount: 10, //表示允许同时上传的最大文件个数

这两个方法都可在插件官网的api里查到，不过有个问题

minFileCount在使用其自带上传方法时才会出现提示

maxFileCount在选择文件超过上限时就会出现提示

showUpload: true,//是否显示上传按钮

具体原因可能是作者还没有修改吧，或许以后的版本会解决这个问题

二、不使用插件自带上传使用form表单提交问题

本人所做项目没有使用插件自带的上传功能而直接使用form表单进行提交

如果是表单提交需要注意以下问题

1.form里必须添加enctype="multipart/form-data"

2.如果是单个图片后台不用接收数组形式，或者可以参考如下方法

for (MultipartFile imgreturn : file) {
/*不添加如下代码会将新添加的内容覆盖掉*/
actinfo = new HashMap<String,Object>();
if (!imgreturn.isEmpty()) {
upImg =FileUtil.upload(imgreturn);
}
}

来接收前台传过来的数据，以上部分代码有删改，保存文件的方法就不予展示了

三、页面接收传递数据使用插件接收问题

此插件是可以进行后台数据传递预览功能的，不过添加新数据后会出现覆盖掉预览数据问题，所以不建议使用本插件进行数据修改操作

预览后台相关代码

// 预览图片json数据组
  var preList = new Array();
     for ( var i = 0; i < reData.length; i++) {
       var img = null;
       img = reData[i].activityimg;
        // 图片类型
        preList[i]= "<img width='120px' src=\'"+img+"\' class=\"file-preview-image\">";
     }
     var previewJson = preList;
    // 与上面 预览图片json数据组 对应的config数据
  var preConfigList = new Array();
     for ( var i = 0; i < reData.length; i++) {
      var array_element = reData[i];
      var tjson = {
        caption: reData[i].activityno, // 展示的文件名
        url:'imgdelete', // 删除url
            key: reData[i].activityno, // 删除是Ajax向后台传递的参数
            width: '120px',
            };
      preConfigList[i] = tjson;
     }
    $('#txt_fileup').fileinput({
   language: 'zh', //设置语言
       uploadUrl: 'activityupdate',
       uploadAsync:false,
       allowedFileExtensions: ['jpg', 'gif', 'png','jpeg'],//接收的文件后缀
       showCaption: true,
       showUpload: false,//是否显示上传按钮
       showRemove: false,//是否显示删除按钮
       showCaption: true,//是否显示输入框
       showPreview:true,
       showCancel:true,
       dropZoneEnabled: false,
       minFileCount:4,
       maxFileCount: 10,
       initialPreviewShowDelete:true,
       msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
       /* initialPreview: previewJson,
       initialPreviewConfig: preConfigList */
     }).off('filepreupload').on('filepreupload', function() {
     }).on("fileuploaded", function(event, outData) {
     });

四、使用到的插件方法调用

为了解决上一个问题层考虑使用调用插件的方法来进行判断，不贵最后失败了，以下是使用过的调用方法

$('#txt_fileup').on('filedeleted', function(event, key) {
/* 触发删除方法 */
});
 $('#txt_fileup').on('fileselect', function(event, key) {
 /* 触发选择方法 */
  });

以上所述是小编给大家介绍的bootstrap fileinput 插件使用项目总结(经验)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Bootstrap Fileinput文件上传组件用法详解

最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传上传中 4.boot
Bootstrap中的fileinput 多图片上传及编辑功能

大家如果对Bootstrap-fileinput 的配置不清楚的话,大家可以查看官方网站:http://plugins.krajee.com/file-input. 逻辑说明:先从后台获取数据展示,然后进行编辑. 废话不多说, 直接上代码. 1. 页面部分代码: <div class="form-group"> <label for="inputEmail3" class="col-xs-3 control-label">
Bootstrap的fileinput插件实现多文件上传的方法

*1.bootstrap-fileinput 插件git下载地址 https://github.com/kartik-v/bootstrap-fileinput.git 2.解决使用bootstrap-fileinput得到返回值上传图片 $("#file-0a").fileinput({ uploadUrl : "/upload_img",//上传图片的url allowedFileExtensions : [ 'jpg', 'png', 'gif' ], ov
bootstrap fileinput完整实例分享

本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上传组件. 文件夹结构版本都是3.x <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htm
JS文件上传神器bootstrap fileinput详解

Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过
bootstrap fileinput 插件使用项目总结(经验)

基础的定义及使用方法网上有很多不再概述,这儿主要写本人所使用项目时碰到的一些问题及解决方案注:本人使用此插件主要用来上传图片之用,插件其他上传文件没有涉及一.上传最小数量问题通过查阅其他资料可知配置中有两个方法 minFileCount:4,//表示允许同时上传的最小文件个数 maxFileCount: 10, //表示允许同时上传的最大文件个数这两个方法都可在插件官网的api里查到,不过有个问题 minFileCount在使用其自带上传方法时才会出现提示 maxFileCount在
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl
bootstrap fileinput插件实现预览上传照片功能

效果图如下所示: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
bootstrap fileinput 上传插件的基础使用

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

最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法首先根据自己的项目路径引入插件css和js文件注意locale语言文件在fileinput.min.js文件之后引入  <link href="../../css/fileinput.min.css"
BootStrap Fileinput上传插件使用实例代码

0.效果图 1.引入js.css(建议css放在html头部,js加载在html底部) <link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" /> <script src="~/scripts/jquery-1.10.2.min.js"></script> <script sr
最好用的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
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

整合前的准备步骤 1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好. 2.下载bootstrap fileinput组件源码: https://github.com/kartik-v/bootstrap-fileinput/ 搭建后的效果图图1. 图2. 图3. 图4. 图5. 在需要编写的jsp页面引入组件本工程的路径界面如下: 在jsp引入组件需要的js

bootstrap fileinput 插件使用项目总结(经验)

相关推荐

随机推荐