在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='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.文件预览的话只需要把文件属性传递到页面即可
