Bootstrap上传文件插件fileinput多文件上传、预览、删除以及限制最大上传数量

Bootstrap上传文件插件fileinput多文件上传、预览、删除以及限制最大上传数量

   项目需求：给房型添加图片管理操作，每种房型下有多张图片，数据库有房型表和图片表，图片表逻辑关联房型表id，每张图片对应图片表的一条数据。本篇主要对fileinput多图上传处理做一个记录，如有不足请大家提出宝贵意见。另fileinput上传配置项和事件请参考：配置项，事件。

一、示例截图

二、实例代码

   由于使用若依管理系统的通用上传方法，本部分图片上传到服务器的功能不再介绍，如想了解请参考若依管理系统源码。
   本实例多图上传操作描述：图片的最大上传数量为3张。选择一张图片后，会自动调用上传功能将图片上传到服务器，上传成功后，将图片的路径保存到数据库；当拖拽框内的图片等于三张时，选择按钮会被禁用，只有删除图片使得图片的数量少于3张才会启用选择按钮；删除图片时，根据图片路径删除数据库数据，此时存在一个问题，拖拽区回显的图片的src是数据库图片路径而新上传的图片的src是base64,无法根据图片路径找到数据库中的对应数据并执行删除操作，目前采用新上传的图片点击删除按钮时页面刷新，刷新后的页面所有图片的src都是数据库中的图片路径，这时再删除图片，就能删除对应数据库中的数据。目前还没有想到更好的解决办法，之后有了更好的办法会更新此博客。

<input name="imageUrls" id="imageUrls" th:value="${imageUrls}" type="hidden">
<div class="row">
   <div class="form-group">
         <div class="file-loading">
             <input id="imgFile" name="file" class="file" type="file" multiple onclick="getMeg()">
         </div>
     </div>
 </div>

 //目前拖拽区图片总数量,这样做判断的目的是由于每次选择一张图片都会
 //自动上传，maxFileCount是单次上传文件数量，在这种情况下是不生效的。
function nowImgTotal() {
 return $(".file-preview-thumbnails").find('.file-preview-frame').length / 2;
}

 function getMeg() {
   if (nowImgTotal() >= 3) {
        $('#imgFile').attr('disabled', 'disabled');
        $.modal.msg("图片允许上传的最大数值为3，请删除需要被替换的图片后再进行上传操作!");
    }
}

var prefix = ctx + "wxsetting/imagedetail";
  var image = [];//图片回显
  var uploadImageArray = [];//所有已上传的图片路径
  var imageConfig = [];//预览的参数
  if ($("#imageUrls").val()) {
      image = $('#imageUrls').val().split(',');
      for (var i = 0; i < image.length; i++) {
          uploadImageArray.push(image[i]);
          imageConfig[i] = {url: prefix + "/removeImg", key: image[i]}
          image[i] = '<img src="' + image[i] + '" class="file-preview-image kv-preview-data" style="width:auto;height:auto;max-width:100%;max-height:100%;">';
      }
  }
$("#imgFile").fileinput({
     language: 'zh', //设置语言
     uploadUrl: "/common/upload", //上传的地址
     allowedFileExtensions: ['jpg', 'png'],//接收的文件后缀
     uploadAsync: false, //默认异步上传,这里设置了同步
     showUpload: false, //是否显示上传按钮
     showRemove: false, //显示移除按钮
     showPreview: true, //是否显示预览
     showCaption: false,//是否显示标题
     browseClass: "btn btn-primary", //按钮样式
     dropZoneEnabled: true,//是否显示拖拽区域
     maxFileCount: 0, //表示允许同时上传的最大文件个数
     enctype: 'multipart/form-data',
     validateInitialCount: true,
     maxFileSize: 0,
     initialPreview: image,
     initialPreviewConfig: imageConfig //配置预览的参数
     , overwriteInitial: false,
     showCaption: false,
     previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
 }).on("filebatchselected", function (event, previewId, files) {
     $("#imgFile").fileinput("upload");
 }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
 //同步上传成功回调，如果是异步上传成功会回调fileuploaded，用错的话，回调是不会执行的
     //通过 data.response.Json对象属性 获得返回数据
     if (data.response.code == 0) {
         var imageUrl = data.response.fileName;
         var wxHotelImageId = $("#wxHotelImageId").val();
         data = {"imageUrl": imageUrl, "wxHotelImageId": wxHotelImageId, "pictureType": "2"};
         $.ajax({
             url: prefix + "/add",
             type: "post",
             dataType: "json",
             async: false,
             data: data,
             beforeSend: function () {
                 $.modal.loading("正在上传图片，请稍后...");
                 $.modal.disable();
             },
             success: function (result) {
                 if (result.code == 0) {
                     $.modal.msg("图片上传成功!");
                     $.modal.closeLoading();
                 }
             }
         })
     } else {
         $.modal.alertWarning(data.response.msg);
     }
 }).on('filebatchuploadcomplete', function (evt, file) {
 //上传完成后判断图片数量，禁用选择按钮
     if (nowImgTotal() >= 3) {
         $('#imgFile').attr('disabled', 'disabled');
     }
 }).on("filepredelete", function (event, key, jqXHR, data) {   //预览图片删除
     for (var i = 0; i < uploadImageArray.length; i++) {
         if (uploadImageArray[i] == key) {
             var successFlag = false;
             $.ajax({
                 url: prefix + "/removeImg",
                 type: "post",
                 dataType: "json",
                 data: {"imageUrl": key},
                 async: false,
                 beforeSend: function () {
                     $.modal.loading("正在删除图片，请稍后...");
                     $.modal.disable();
                 },
                 success: function (result) {
                     if (result.code == 0) {
                         $.modal.closeLoading();
                         uploadImageArray.splice(i, 1);
                         //赋值给images
                         $('#imageUrls').val(uploadImageArray.join());
                         successFlag = true;
                     }
                 }
             })
             if (successFlag) {
                 break;
             }
         }
     }
     if (nowImgTotal() <= 3) {
         $('#imgFile').removeAttr('disabled')
     }
 }).on("filesuccessremove", function (event, data, previewId, index) {
     //在删除initialPreview内容集中的每个缩略图文件之后触发此事件
     location.reload();
 });