码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap fileinput组件的使用

时间:2018-04-13 13:22:30      阅读:397      评论:0      收藏:0      [点我收藏+]

标签:back   func   lov   max   详细   localhost   index   介绍   form   

组件的下载地址为:https://github.com/kartik-v/bootstrap-fileinput

比较详细的介绍可参看:http://www.jq22.com/jquery-info5231

下面说一下在使用此组件时候遇到的一些问题,和解决办法

问题1:在选择图片时,无法选择多个图片,且第一张图片选择后,在选择第二张图片时,第一张图片会被第二章图片覆盖,即无法多选图片。

解决办法:需要在input中加入multiple="multiple",且在初始化fileinput配置时,一定加入uploadUrl的设置

问题2:提交多张图片时只post了一张

解决办法:fileinput默认是异步上传的,即uploadAsync: true,你会发现如果你上传多张图片,请求就会发送多次,每次只提交一张图片,如果想一次提交所有图片,则需要将uploadAsync设置为false。

问题3:使用自带的上传按钮时,如何向后台传递额外的参数

解决办法:在fileinput配置中加入uploadExtraData配置,如下:

uploadExtraData:function (previewId, index) {
                    //向后台传递type,nameStr作为额外参数
                    var obj = {};
                    obj.type = "cardno";
                    obj.nameStr = "HL0093"
                    return obj;
                }

 

问题4:如何取消预览缩略图上面的查看、上传、删除三个小图片

解决办法:在fileinput配置中加入layoutTemplates配置,如下:

layoutTemplates :{
            actionDelete:‘‘, //去除上传预览的缩略图中的删除图标
            actionUpload:‘‘,//去除上传预览缩略图中的上传图片;
            actionZoom:‘‘   //去除上传预览缩略图中的查看详情预览的缩略图标。
        },

 

此处附上比较完整的实现代码

 

 <input class="form-control" type="file" id="idFiles" multiple="multiple" name="file"/>    

 

<script type="text/javascript">  
       
               
       $(document).ready(function() {
        
           
            $("#idFiles").fileinput({  
                  language: ‘zh‘, //设置语言 
                  uploadUrl:‘http://localhost/backoa/employee/upload‘,
                  enctype: ‘multipart/form-data‘,
                  allowedFileExtensions : [‘jpg‘, ‘png‘,‘bmp‘,‘jpeg‘],//接收的文件后缀
                  showUpload: true, //是否显示上传按钮
                  showPreview: true, //展前预览
                  showCaption: true,//是否显示标题
                  maxFileSize : 10000,//上传文件最大的尺寸
                  maxFileCount: 10, 
                  dropZoneEnabled: false,//是否显示拖拽区域
                  browseClass: "btn btn-primary", //按钮样式
                  uploadAsync: false,
                  allowedPreviewTypes: [‘image‘],
                  layoutTemplates :{                  
                      actionUpload:‘‘,//去除上传预览缩略图中的上传图片;                 
                  },
                  uploadExtraData:function (previewId, index) {
                    //向后台传递type,nameStr作为额外参数
                    var obj = {};
                    obj.type = "cardno";
                    obj.nameStr = "HL0093"
                    return obj;
                }

            })  
  
       });
       
   </script> 

 

相关参考:https://blog.csdn.net/zlb_lover/article/details/76548772

 

https://blog.csdn.net/u012526194/article/details/69937741

 

bootstrap fileinput组件的使用

标签:back   func   lov   max   详细   localhost   index   介绍   form   

原文地址:https://www.cnblogs.com/conswin/p/8819505.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!