传统方式上传文件

依赖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>

 

最终效果:

 

 

 

 

 

 

 

posted @ 2020-07-11 21:18  指尖下的世界  阅读(246)  评论(0编辑  收藏  举报
/* 看板娘 */ /*炸泡*/
/* 鼠标点击求赞文字特效 */