當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/20 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 webuploader 实现图片批量上传功能附实例代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、導入資源

2、JSP代碼

<div class="page-container"><div class="row cl"><label class="form-label col-xs-4 col-sm-2"><spanclass="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"><spanclass="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"><buttononClick="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代碼

注意：

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/huahangString 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; } } }

總結

以上是生活随笔為你收集整理的webuploader 实现图片批量上传功能附实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：路由器WAN网口可接入192.168.0
下一篇：使用ML 和 DNN 建模技巧总结