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


Posted in Javascript onFebruary 22, 2017

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

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

一、上传最小数量问题 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 插件使用项目总结(经验),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
jquery插件validate验证的小例子
May 08 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
纯JS实现轮播图
Feb 22 #Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 #Javascript
js实现简易垂直滚动条
Feb 22 #Javascript
You might like
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python 26进制计算实现方法
2015/05/28 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
财务部总监岗位职责
2014/03/12 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
群众路线剖析材料
2014/09/30 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL