依赖jar:
<!-- 上传文件所需jar包--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency>
上传前台代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <script type="text/javascript"> function handleFile(f) { var files = f.files; if (files.length > 9) { alert("同时最多只能上传9个文件!"); f.value = null; return false; } var result = ""; for (var i = 0; i < files.length; i++) { result += "文件名:" + files[i].name; result += "文件大小:" + files[i].size; result += "文件类型:" + files[i].type; if (files[i].size > 1024 * 1024 * 10) {//限定上传的文件中,单个大小不可超过10M alert("单个文件不可大于10Mb!"); //如果超过10M,则文件清空 f.value = null; } } /* alert(result); */ } </script> <body> <%-- form的enctype="multipart/form-data" (默认值是:application/x-www-form-uxlencoded) enctype:是表单请求正文的类型 --%> <form action="fileUploadController/fileUploadtest" method="post" enctype="multipart/form-data"> 名称: <input type="text" name="text"><br> <%-- multiple="multiple"设置一次可以选择多个文件 accept="..."设置可选择的文件类型 accept="image/png" or accept=".png" ~~~~~ 只接受 png 图片. accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" ~~~~~ 只接受PNG/JPEG 文件. accept="image/*"~~~~~ 接受任何图片文件类型. accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" ~~~~~接受任何 MS Doc 文件类型. --%> 图片:<input type="file" name="file" multiple="multiple" accept="image/png,image/gif,image/jpeg, image/jp2,.txt" onchange="handleFile(this)"><br> <%-- 我们也可以写多个input上传多个不同种类的文件--%> <%-- 图片2: <input type="file" name="file2"><br>--%> <%-- 图片3: <input type="file" name="file3"><br>--%> <input type="submit"><br> </form> </body> </html>
上传后台代码:
@RequestMapping("/fileUploadController") @Controller("fileUploadController") public class _07FileUploadController { @RequestMapping("/fileUploadtest") public ModelAndView fileUploadtest(HttpServletRequest request) throws Exception { ModelAndView modelAndView = new ModelAndView(); ArrayList<String> filenameList = new ArrayList<String>(); //1.判断表单是否支持文件上传 boolean multipartContent = ServletFileUpload.isMultipartContent(request); if (!multipartContent) { // 可以返回错误页面,也可以抛异常 modelAndView.setViewName("error"); return modelAndView; } //2.创建DiskFileItemFactory对象 DiskFileItemFactory factory = new DiskFileItemFactory(); /** * setRepository:设置缓存文件的目录(commons-fileupload是使用缓存的。 * 原则:大小是否超过10kb。如果超过10kb则使用临时文件作为缓存) * 如果不超过10KB则使用内存作为缓存 * 如果下面这行代码没有配置,则默认使用tomcat目录作为缓存目录 */ // factory.setRepository(new File("D:\temp")); //3.创建ServletFileUpload对象,//设置上传文件限制 ServletFileUpload upload = new ServletFileUpload(factory); upload.setFileSizeMax(1024 * 1024 * 10);//1024个kb等于1Mb,最终设置结果是10Mb upload.setHeaderEncoding("utf-8");//设置编码格式 // 4.解析request,得到FileItem对象的集合 List<FileItem> fileItems = upload.parseRequest(request); //5.判断FileItem是否文件字段 for (FileItem fileItem : fileItems) { //6.不是文件:打印输出 if (fileItem.isFormField()) {//是普通表单字段 String fieldName = fileItem.getFieldName();//普通字段字段名 String fileValue = fileItem.getString("UTF-8");//普通字段字段值 System.out.println(fieldName + "," + fileValue); } else {//是文件:写文件 //获取文件名 String name = fileItem.getName(); // 拼接新的文件名 String uuid = UUID.randomUUID().toString().replace("-", "").toUpperCase(); String newName = uuid + System.currentTimeMillis() + name;//8BDC8C7F743548A9863FA01755E8256515944355054110.jpg filenameList.add(newName); modelAndView.addObject("fileNameList", filenameList); // 创建新的文件夹用来存放上传文件 File file = new File("D:\fileUpload"); if (!file.exists()) { file.mkdir(); } // 如果使用服务器内部路径可以按照下面的方式写: // String path = request.getServletContext().getRealPath("/WIB-INF/uploads"); // 从缓冲区写入磁盘 fileItem.write(new File(file, newName)); // 从缓冲区删除 fileItem.delete(); System.out.println("文件上传成功!!!"); } } //8.释放流 System.out.println("上传执行了"); modelAndView.setViewName("fileUpLoadShow"); return modelAndView; } }
展示图片页:
所需依赖:
<!-- jstl标签--> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency>
所需配置:
tomcat配置虚拟路径:参考:https://www.cnblogs.com/luzhanshi/p/13285349.html
fileUpLoadShow.jsp代码:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <c:forEach items="${fileNameList}" var="name"> <img src='/images/${name}' alt="图片加载失败"><br> ${name} </c:forEach> </body> </html>
最终效果: