在javaweb中，使用ajax實現文件上傳預覽
1.表單：
-設置input type="file",multiple="multiple"可以選擇多個文件，id是用來獲取element，上面的hidden是用來保存字段值，即保存最終的文件名稱，可能是多個
2.js:
<script type="text/javascript"> var inputEle = document.getElementById('file1'); inputEle.onchange = function (e) { var formData = new FormData(); for (var i = 0; i < this.files.length; i++) { var file = this.files[i]; console.log(file); formData.append('file', file); }; formData.append('eId', ${dInfo.enterpriseId}); // formData.append(其他參數) if(this.files.length > 0){ //有文件就call后台，沒有就不call var type="handleagreementattachment"; var falg="fileFlag1"; fileUpload(formData,type,falg); } } //文件上傳，call后台 function fileUpload(formData,type,flag) { $.ajax({ url: "${ctx}/file/fileUtil/FileUpload", type: 'POST', cache: false, processData: false, contentType: false, enctype:"multipart/form-data", dataType:"json", data: formData, async:false, error: function (request) { alert("服務器故障"); }, success: function (data) { console.log(data); //wasterwatermonitorattachment var fileValue = $("#"+ type +"").val(); for(var i=0;i<data.length;i++){ fileValue += data[i]["fileName"]+";"; //回顯預覽 var radom = Math.random().toString(36).substring(2); $("#"+ flag +"").append("<li id='"+ radom +"'><a href='"+ data[i]["fileAdd"]+data[i]["fileName"] +"' style='width:60px;' title="+ data[i]["fileName"] +">" + "<img src='${ctxStatic}/hb/fileimages/"+ data[i]["type"] +".png' alt='' style='margin-bottom: 10px'/><b>"+ data[i]["shortName"] +"</b></a>" + "<b style='color:red;cursor:pointer;' onclick=delFile('"+ radom +"','"+ data[i]["fileName"] +"','"+ type +"');>刪除</b></li>"); } $("#"+ type +"").val(fileValue); } }); } //刪除文件 function delFile(id,name,type) { var a = confirm("確認刪除 " + name + " 嗎？"); if(a==true){ var node = document.getElementById(id); node.remove(); //刪除這個節點 var value = $("#"+ type +"").val(); //獲取本來的字段值 value = value.replace(name+";",""); //刪除其中的某個文件 $("#"+ type +"").val(value); //重新賦值 return true; }else{ return false; } } </script>
要注意這一塊script要放到<body>的最下面，否則會導致 inputEle 獲取不到element,因為頁面沒有加載完成；ajax call的時候只需要傳遞 formData 就可以了，我這邊是業務需求所以多了幾個對象。
3.java后台接收並處理文件，接收的時候可以debug一下，這里可以獲取到很多的文件屬性。我這邊寫了一個公用的后台，不管哪里使用，直接call這里就好了。
這里上傳的文件可能是多個 MultiparFile[] 來接收文件參數，返回給前端的是一個文件對象的集合，業務需要，所以用文件對象來存儲文件的各種屬性。
package com.zhouhe.modules.myUtils; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.util.List; /** * 文件上傳 * @Author zhouhe * @Date 2019/12/5 13:07 */ @Controller @RequestMapping(value = "${adminPath}/file/fileUtil") public class FileController { /** * 文件上傳，ajax 方式 * @param request * @param model * @param file * @return */ @ResponseBody @RequestMapping(value="/FileUpload", method = RequestMethod.POST) public List<FileEntity> FileUpload(HttpServletRequest request, Model model,@RequestParam(value="file",required=false) MultipartFile[] file) { // List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file"); String eId = request.getParameter("eId"); //企業 id List<FileEntity> fileList = FileUpload.uploadFiles(file,eId); return fileList; } }
4.下面是調用文件上傳Util
package com.zhouhe.modules.myUtils; import com.zhouhe.modules.api.util.Constants; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.List; /** * 文件上傳 ajax 方式 * @Author zhouhe * @Date 2019/12/5 13:12 */ public class FileUpload { private static Logger logger = LoggerFactory.getLogger(FileUpload.class); public static final String FILE_URL = Constants.LOCAL_FILE_URL; //本地路徑 // public static final String FILE_URL = Constants.BASE_FILE_URL; //服務器部署路徑 /** * 多個文件上傳，循環調用單個文件上傳的方法 * @param file * @param folder * @return */ public static List<FileEntity> uploadFiles(MultipartFile[] file,String folder){ String fileFolder = FILE_URL+ "ea/" + folder; //一起一檔的文件目錄是 基礎目錄 + ea + 企業id List<FileEntity> fileList = new ArrayList<FileEntity>(); File isFolder = new File(fileFolder); if (!isFolder.exists()) { isFolder.mkdirs(); } for(int i=0;i<file.length;i++){ fileList.add(uploadFile(file[i],fileFolder,folder)); } return fileList; } /** * 上傳文件(單個) * 1.Constants.LOCAL_FILE_URL 是本地文件存儲路徑，部署要換成 Constants.BASE_FILE_URL * 2.jsp 表單提交的時候要設置 method="post" enctype="multipart/form-data" * 3.要在 springmvc 中有對上傳文件的大小做限制 * 4.要考慮傳遞過來的是多個文件問題，暫時沒有實現 * * @param upFile 頁面傳過來的文件 * @param fileFolder 上傳文件的全路徑 * @param folder 存儲的文件夾 這里是企業id * @return 文件對象 */ public static FileEntity uploadFile(MultipartFile upFile,String fileFolder, String folder){ //定義返回對象，返回文件對象 FileEntity f = new FileEntity(); if (upFile.getSize() > 0) { // 得到文件的原始名稱，如：美女.png String fileName = upFile.getOriginalFilename(); File file = new File(fileFolder,fileName); try { upFile.transferTo(file); //上傳文件 String fileRoute = Constants.DOWNLOAD_URL +"ea/"+folder+"/"; //文件下載路徑，服務器路徑 f.setFileAdd(fileRoute); f.setFileName(fileName); //文件名 f.setShortName(shortName(fileName)); //文件縮略名 f.setSuffix(fileName.substring(fileName.lastIndexOf(".") + 1)); //后綴 f.setType(getType(fileName.substring(fileName.lastIndexOf(".") + 1))); //文件類型 return f; //返回文件對象 } catch (IOException e) { e.printStackTrace(); logger.debug("上傳文件失敗"); } } return null; } /** * 文件縮略名 * 保留4個字符，后面用 ... 代替 * @param name * @return */ public static String shortName(String name){ if(name.length() > 4){ String str = name.substring(4,name.length()); name = name.replace(str,"..."); } return name; } /** * 根據文件后綴判斷文件類型 * @param name * @return */ public static String getType(String name){ if ("pdf".equals(name)) { return "pdf"; } else if ("excel".equals(name)) { return "excel"; } else if ("xls".equals(name)) { return "excel"; } else if ("xlsx".equals(name)) { return "excel"; } else if ("docx".equals(name)) { return "word"; } else if ("doc".equals(name)) { return "word"; } else if ("png".equals(name)) { return "png"; } else if ("jpg".equals(name)) { return "png"; } else if ("jpeg".equals(name)) { return "png"; } else if ("rar".equals(name)) { return "zip"; } else if ("ppt".equals(name)) { return "ppt"; } else if ("pptx".equals(name)) { return "ppt"; }else { return "txt"; } } }
5.文件屬性類
package com.zhouhe.modules.myUtils; /** * 文件屬性類 * @Author zhouhe * @Date 2019/12/3 16:17 */ public class FileEntity { private String fileName; //文件名稱 private String shortName; //文件縮略名 private String fileAdd; //文件地址 private String suffix; //文件后綴 private String type; //文件類型 public String getShortName() { return shortName; } public void setShortName(String shortName) { this.shortName = shortName; } public String getType() { return type; } public void setType(String type) { this.type = type; } public String getFileName() { return fileName; } public void setFileName(String fileName) { this.fileName = fileName; } public String getFileAdd() { return fileAdd; } public void setFileAdd(String fileAdd) { this.fileAdd = fileAdd; } public String getSuffix() { return suffix; } public void setSuffix(String suffix) { this.suffix = suffix; } }
6.文件預覽的話只需要把文件屬性傳遞到頁面即可
