bootstrap-fileinput实现多图上传编辑删除新增等一系列操作

中文学习网站 http://www.bootstrap-fileinput.com/methods.html

演示视频

效果图

实现方式

1.前端部分

首先引入相关的css js文件

<link th:href="@{/ajax/libs/bootstrap-fileinput/fileinput.min.css}" rel="stylesheet"/>

<script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.min.js}"></script>

2.放置上传按钮，其中id="urlLink" 是用来记录图片路径，我的格式是 1.png|2.png|3.png

<input id="urlLink" name="logoUrl" class="form-control" type="hidden" th:field="*{logoUrl}">
<input type="file" id="uploadfile" multiple="multiple" class="file-loading">

3.开始js前端部分代码

 //初始化文件预览数据和文件上传附件
   initUpload();

   //导入文件上传完成之后的事件
    $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
        var response = data.response;
        $("#fileMd5").val(response.fileMd5);
        $("#version").val(response.newVersionName);
        $("#url").val(response.filePath);
        var imgPath = $("#urlLink").val();
        if(imgPath!=null && imgPath !=''){
           $("#urlLink").val(imgPath+"|"+response.filePath);
        }else{
           $("#urlLink").val(response.filePath);
        }
           $("#uploadfile").fileinput('destroy');//销毁fileUploadFileInput
           initUpload();//重新初始化文件预览数据和文件上传附件
           $('#uploadfile').fileinput('enable');//使能按钮
       });
   
   $('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
      var form = data.form, files = data.files, extra = data.extra,
       response = data.response, reader = data.reader;
   });
   
   $('#uploadfile').on('filesuccessremove', function(event, id) {
       if (some_processing_function(id)) {
          console.log('Uploaded thumbnail successfully removed');
       } else {
           return false; 
       }
   });
   
   /* 这是删除 */
   $('#uploadfile').on('filepredelete', function(event, key, jqXHR, data) {  //就是在删除原图片之前触发，而新选择的图片不会触发。能满足我们的要求。
        console.log('Key = ' + key);
           var logoUrl = $("#urlLink").val();
        var urlLinkNew = '';
           var imgArr = logoUrl.split("|");
           for ( var i = 0; i < imgArr.length; i++) {
               if (i == key) continue;
               if (urlLinkNew !=''){
                   urlLinkNew = urlLinkNew + "|" + imgArr[i];
               }else{
                   urlLinkNew = imgArr[i];
               }
           }
           $("#urlLink").val(urlLinkNew);
           console.log($("#urlLink").val())
    });

   function initUpload() {
           var logoUrl = $("#urlLink").val();//拿到图片路径
           var preList = new Array();
           var initialPreviewConfig = new Array();
           //设置初始化区域值
           if (logoUrl!=null && logoUrl != ''){
               var imgArr = logoUrl.split("|");
               for ( var i = 0; i < imgArr.length; i++) {
                   preList[i] = imgServer+ imgArr[i]
                   var a = {
                       caption : '主图'+(i+1),
                       width: '120px',
                       url: '/ajaxUpload/del',
                       key: i,
                       extra: {url: imgArr[i]}
                   }
                   initialPreviewConfig.push(a);
               }
           }
           $("#uploadfile").fileinput({
               language: 'zh', //设置语言
               uploadUrl: "/ajaxUpload/pic", //上传的地址，改成自己的
               allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
               initialPreviewAsData:true,
               initialPreview:preList,//预览图片
               uploadAsync: true, //默认异步上传
               showUpload: true, //是否显示上传按钮
               showRemove : false, //显示移除按钮
               showPreview : true, //是否显示预览
               showCaption: false,//是否显示标题
               browseClass: "btn btn-primary", //按钮样式
               dropZoneEnabled: false,//是否显示拖拽区域
               maxFileCount: 4, //表示允许同时上传的最大文件个数
               maxFileSize:10 *1024 *1024,
               messages: {maxFileSize:'文件上传的最大大小为 10MB',acceptFileTypes:'此文件是不支持的图片格式'    },
               enctype: 'multipart/form-data',
               validateInitialCount:true,
               msgFilesTooMany:5,
               autoReplace:false,
               initialPreviewConfig:initialPreviewConfig
           });
       }

4.java后端代码

package com.fkr.web.controller.common;

import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.fkr.common.utils.IdGenUtil;
import com.fkr.common.utils.alioss.AliOSSConfig;
import com.fkr.common.utils.alioss.AliOSSUtil;

import ch.qos.logback.classic.Logger;

@Controller
@RequestMapping(value = "/ajaxUpload")
public class UploadController {
   
   private final Logger logger = (Logger) LoggerFactory.getLogger(UploadController.class);
   
// private String baseUrl = "F:/projectFiles";// 拿到配置文件配置的路径

   @RequestMapping(value = "/pic")
   @ResponseBody
   public Map<String, Object> upload(HttpServletRequest request, HttpServletResponse response,String type) throws IOException {
      Map<String, Object> retMap = new HashMap<String, Object>();
      //文件上传代码自己完善吧
        return retMap;

      
   }
   
   @RequestMapping(value = "/del")
   @ResponseBody
   public Map<String, String> del(String url) {
      Map<String, String> map = new HashMap<String, String>();
      map.put("url", url);//拿到路径之后自己删除真实路径下的图片
      return map;
   }

}