您的位置: 首页  >  文章  >  bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传

bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传

分类: 文章 • 2024-08-14 11:44:40

bootstrap file input 多文件上传工具，功能十分强大，也很完善，我也是在接触了这个插件后自己研究使用的，当然也踩了很多的坑，主要是官方API是英文的，可能没兴趣一行一行的读，只能是用到了什么需求然后再去看对应的API说明。所以本文主要是我在使用过程中的解决思路，对此插件的使用也并不完善，请各位谅解。

官方API请撮这里


需求：先来说说我使用此插件的需求及流程

1.在表单中上传多张图片，并且表单中还要其他数据。

2.上传成功后关闭弹出框，并重置上传插件。


1.HTML

[html] view plain copy
  1. <form id="add_commodity_form" method="post" enctype="multipart/form-data">  
  2.          ...//其他form参数  
  3.         <div class="form-group" style="width:99%">  
  4.            <input id="add_bachPic" name="commoPicArr" type="file" multiple  class="file-loading">  
  5.         </div>  
  6. </form>  


2.js

[javascript] view plain copy
  1. //初始化文件上传插件  
  2. unction initFileUpload(prefix){  
  3.    $("#add_bachPic").fileinput({  
  4.     language: 'zh',                                 //中文  
  5.     uploadUrl:'<%=basePath%>/commodity/addCommodityPic',  
  6.     showPreview: true,              //展前预览  
  7.     showUpload: false,              //不显示上传按钮  
  8.     showCaption: false,             //不显示文字表述  
  9.     uploadAsync:false,                             //采用同步上传  
  10.     removeFromPreviewOnError:true,                 //当文件不符合规则，就不显示预览  
  11.     maxFileCount: 5,  
  12.     maxFileSize: 1024*10,                          //单位为kb，如果为0表示不限制文件大小  
  13.     allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp"],  
  14.        uploadExtraData: function(previewId, index) {   //额外参数 返回json数组  
  15.                  return {  
  16.                          'id':commId  
  17.                         };  
  18.                  }  
  19.        }).on("filebatchuploadsuccess", function(event, data) {<span style="white-space:pre;">   </span>//当上传成功回调函数  
  20.                var response = data.response;  
  21.                if(response.resultCode=='0'){  
  22.                        $("#closedAddWin").click();  
  23.             table.ajax.reload();  
  24.     }  
  25.     });  
  26. }   
原来我的思路是不使用插件的上传按钮，而自己通过js将插件里面的多文件与表单一起提交，但是到后台只能获取到最后一个文件，我不是文件数组。我查了很多办法好像都没办法，后来改变思路：还是自己用js触发提交表单，只是先将表单其他数据传到后台保存返回数据库id,然后通过$('#add_bachPic').fileinput('upload');触发提交文件上传，并传递额外参数id,最后保存成功！


3.确认新增按钮

[javascript] view plain copy
  1. var commId;  
  2. function addCommodity(){  
  3.   
  4.     if($('#add_bachPic').fileinput("getFilesCount")<=0){          //获取文件个数  
  5.         myAlert(1,"请至少上传一张详情图片!");  
  6.         return;  
  7.     }  
  8.     $("#add_commodity_form").attr('action','<%=basePath%>/commodity/addCommodity');  
  9.     $("#add_commodity_form").ajaxSubmit({  
  10.            success : function(data){  
  11.                         var result = $.parseJSON(data);  
  12.                         if(result.resultCode == 0){  
  13.                                 var id = result.result;<span style="white-space:pre;">                  </span>//先保存基本数据，返回数据库id  
  14.                                 commId = id;                            //保存id值  
  15.                                 $('#add_bachPic').fileinput('upload');        //然后触发插件开始上传文件  
  16.                         }<span style="white-space:pre;">    </span>  
  17.                }  
  18.          });  
  19. }  

4.controller代码

[java] view plain copy
  1.                /** 
  2.      *  
  3.      * @MethodName: addCommodityPic 
  4.      * @Description: 商品信息管理：新增详情图片 
  5.      * @param param 
  6.      * @return DataGrid 
  7.      */  
  8.     @RequestMapping("/addCommodityPic")  
  9.     @ResponseBody  
  10.     public Result addCommodityPic(Long id,HttpServletRequest request,@RequestParam MultipartFile[] commoPicArr){  
  11.     Result result = new Result(Result.FAIL, "新增商品失败！");  
  12.     try{  
  13.         //commoPicArr数组则是上传的多文件，然后就可以做进一步处理，在此省略....  
  14.   
  15.         .....  
  16.         int a = commService.updateCommodityPic(vo);  
  17.         if(a>0){  
  18.             result.setResultCode(Result.SUCC);  
  19.             result.setMsg("新增商品成功!");  
  20.         }  
  21.     } catch (Exception e) {  
  22.         logger.error("商品信息管理：新增图片", e.getCause());  
  23.         e.printStackTrace();  
  24.     }  
  25.     return result;  
  26. }  

后台代码通过同步上传就能获取到文件数组，然后就可以做进一步处理了，这里就不详细说java代码了。当重新打开对话框，需要对插件进行重置，可以使用方法

$("#add_bachPic").fileinput('reset'); //重置预览表中的所有文件，

还有其他的方法例如$("#add_bachPic").fileinput('clear'); 只是清理还未上传的预览，上传成功的不会清除。

bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传


如果想限制图片不能单独上传，也就是不显示预览中的上传按钮，我的做法很简单粗暴，直接取源码中删除了这个方法。。。

bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传

如果各位还有什么好的解决方法请务必告诉我bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传
bootstrap File Input 多文件上传插件使用记录（一）配置及批量同步上传


好了。这就是我使用这个插件的一些方法了，当然可能还有修改的功能，就是打开修改框然后展示原来的图片，这个暂时还没有去看，以后再说了。


相关推荐