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 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
JS数组的常用10种方法详解
May 08 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
详解Javascript实践中的命令模式
May 05 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
javascript Object与Function使用
2010/01/11 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
python中对list去重的多种方法
2014/09/18 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
电气自动化自荐信
2013/10/10 职场文书
探亲邀请信范文
2014/01/30 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
警示教育活动总结
2014/05/05 职场文书
工作推荐信范文
2014/05/10 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android