webuploader 实现图片批量上传功能附实例代码

r囧r小猫 2023-06-24 04:51 41阅读 0赞

1、导入资源  
![在这里插入图片描述][20191220164516826.png]  
![在这里插入图片描述][20191220164520837.png]  
2、JSP代码

<div class="page-container">
        <div class="row cl">
          <label class="form-label col-xs-4 col-sm-2"><span
            class="c-red">*</span>项目名称：</label>
          <div class="formControls col-xs-8 col-sm-9">
            <input type="text" class="input-text" value="${proName }"
              placeholder="" id="" name="proName" readonly="readonly">
          </div>
        </div>
        <div class="row cl">
          <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
          <div class="formControls col-xs-8 col-sm-9">
            <div class="uploader-thum-container">
              <div id="fileList" class="uploader-list"></div>
              <div id="filePicker">选择图片</div>
              <button id="btn-star"
                class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
            </div>
          </div>
        </div>
        <div class="row cl">
          <label class="form-label col-xs-4 col-sm-2"><span
            class="c-red">*</span>项目发票上传：</label>
          <div class="formControls col-xs-8 col-sm-9">
            <div class="uploader-list-container">
              <div class="queueList">
                <div id="dndArea" class="placeholder">
                  <div id="filePicker-2"></div>
                  <p>或将照片拖到这里，单次最多可选300张</p>
                </div>
              </div>
              <div class="statusBar" style="display:none;">
                <div class="progress">
                  <span class="text">0%</span> <span class="percentage"></span>
                </div>
                <div class="info"></div>
                <div class="btns">
                  <div id="filePicker2"></div>
                  <div class="uploadBtn">开始上传</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row cl">
          <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
            <button
              onClick="article_add('','invoiceVo/save?&projectId=${projectId}&invoiceScan=','10001');"
              class="btn btn-primary radius" type="button">
              <i class="Hui-iconfont"></i>   保存  
            </button>
          </div>
        </div>
      </div>

3、Js代码

注意：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20191220164649995.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 1]  
4、controller代码

/** * 跳转到上传发票的页面 * @param proName * @param map * @return */
      @RequestMapping(value = "/upload" )
      public String invoiceUpload(String proName,Long id,Map<String, Object> map){ 
        map.put("proName", proName);
        projectService.getProject(id);
        map.put("projectId", id);
        return "project/invoiceUpload";
      }
      /** * 上传发票并保存导数据库 * @param file * @param request * @param response * @return */
      @ResponseBody
      @RequestMapping(value = "/news_uploder", method ={ RequestMethod.POST,RequestMethod.GET}, produces = "application/json; charset=utf-8")   
      public JSONObject uploder(@RequestParam MultipartFile[] file,Long projectId,HttpServletRequest request,HttpServletResponse response){  
        String flag=null; 
        JSONObject jsonObject = new JSONObject();
        try {  
          WebuploaderUtil webuploaderUtil=new WebuploaderUtil(); 
          webuploaderUtil.upload(file[0], "upload/invoice/", request); 
          flag=webuploaderUtil.getFileName(); 
          jsonObject.put("filePath", flag);
          jsonObject.put("status", "success");
        } catch (Exception e) {  
          e.printStackTrace(); 
        }   
        return jsonObject; 
      }
      5、工具类
      package com.softjx.util;
    /** *Project Name: QDLIMAP *File Name: WebuploaderUtil.java *Package Name: com.ltmap.platform.cms.util *Date: 2017年4月13日 下午6:30:45 *Copyright (c) 2017,578888218@qq.com All Rights Reserved. */
    import java.io.File; 
    import java.text.SimpleDateFormat; 
    import java.util.Date; 
    import javax.servlet.http.HttpServletRequest; 
    import org.springframework.web.multipart.MultipartFile; 
    /** *Title: WebuploaderUtil<br/> *Description: *@Company: 励图高科<br/> *@author: 刘云生 *@version: v1.0 *@since: JDK 1.8.0_40 *@Date: 2017年4月13日 下午6:30:45 <br/> */
    public class WebuploaderUtil {  
      private String allowSuffix = "jpg,png,gif,jpeg";//允许文件格式 
      private long allowSize = 2L;//允许文件大小 
      private String fileName; 
      private String[] fileNames; 
      public String getAllowSuffix() {  
        return allowSuffix; 
      } 
      public void setAllowSuffix(String allowSuffix) {  
        this.allowSuffix = allowSuffix; 
      } 
      public long getAllowSize() {  
        return allowSize*1024*1024; 
      } 
      public void setAllowSize(long allowSize) {  
        this.allowSize = allowSize; 
      } 
      public String getFileName() {  
        return fileName; 
      } 
      public void setFileName(String fileName) {  
        this.fileName = fileName; 
      } 
      public String[] getFileNames() {  
        return fileNames; 
      } 
      public void setFileNames(String[] fileNames) {  
        this.fileNames = fileNames; 
      } 
      /** * * @Title: getFileNameNew * @Description: TODO * @param: @return * @return: String * @author: 刘云生 * @Date: 2017年4月14日 上午10:17:35 * @throws */
      private String getFileNameNew(){  
        SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS"); 
        return fmt.format(new Date()); 
      } 
      /** * * @Title: uploads * @Description: TODO * @param: @param files * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: 刘云生 * @Date: 2017年4月14日 上午10:17:14 * @throws */
      public void uploads(MultipartFile[] files, String destDir,HttpServletRequest request) throws Exception {  
        String path = request.getContextPath(); 
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; 
        try {  
          fileNames = new String[files.length]; 
          int index = 0; 
          for (MultipartFile file : files) {  
            String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); 
            int length = getAllowSuffix().indexOf(suffix); 
            if(length == -1){  
              throw new Exception("请上传允许格式的文件"); 
            } 
            if(file.getSize() > getAllowSize()){  
              throw new Exception("您上传的文件大小已经超出范围"); 
            } 
            String realPath = request.getSession().getServletContext().getRealPath("/"); 
            File destFile = new File(realPath+destDir); 
            if(!destFile.exists()){  
              destFile.mkdirs(); 
            } 
            String fileNameNew = getFileNameNew()+"."+suffix;// 
            File f = new File(destFile.getAbsoluteFile()+"\\"+fileNameNew); 
            file.transferTo(f); 
            f.createNewFile(); 
            fileNames[index++] =basePath+destDir+fileNameNew; 
          } 
        } catch (Exception e) {  
          throw e; 
        } 
      } 
      /** * * @Title: upload * @Description: TODO * @param: @param file * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: 刘云生 * @Date: 2017年4月14日 上午10:16:16 * @throws */
      public void upload(MultipartFile file, String destDir,HttpServletRequest request) throws Exception {  
        String path = request.getContextPath(); 
        //http://localhost:8088/huahang
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; 
        try {  
            String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); 
            int length = getAllowSuffix().indexOf(suffix); 
            if(length == -1){  
              throw new Exception("请上传允许格式的文件"); 
            } 
            if(file.getSize() > getAllowSize()){  
              throw new Exception("您上传的文件大小已经超出范围"); 
            } 
            String realPath = request.getSession().getServletContext().getRealPath("/")+"/"; 
            File destFile = new File(realPath+destDir); 
            if(!destFile.exists()){  
              destFile.mkdirs(); 
            } 
            String fileNameNew = getFileNameNew()+"."+suffix; 
            File f = new File(destFile.getAbsoluteFile()+"/"+fileNameNew); 
            file.transferTo(f); 
            f.createNewFile(); 
            //包含网站的全路径http://localhost:8080/QDLIMAP/upload/user/20170414104142667.png 
            //fileName = basePath+destDir+fileNameNew; 
            //返回相对路径upload/user/20170414104142667.png 
            fileName = destDir+fileNameNew; 
        } catch (Exception e) {  
          throw e; 
      } 
    } 
    }

[20191220164516826.png]: https://img-blog.csdnimg.cn/20191220164516826.png
[20191220164520837.png]: https://img-blog.csdnimg.cn/20191220164520837.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191220164642934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI=,size_16,color_FFFFFF,t_70
[20191220164649995.png]: https://img-blog.csdnimg.cn/20191220164649995.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191220164656416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R4eXpoYmI=,size_16,color_FFFFFF,t_70