• 传统方式上传文件


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

    最终效果:

     

     

     

  • 相关阅读:
    关于2019-nCoV事件中新媒体的作用
    评估移民宇宙计划
    关于2019-nCoV事件,分析自己的焦虑心理
    肺炎阴云仍未散去,今天捡到一个贝壳
    关于新型肺炎,重点是毒性
    提高效率的方法
    《白说》读书笔记
    MIPS下载运行busybox
    camera模组笔记
    求知领域
  • 原文地址:https://www.cnblogs.com/luzhanshi/p/13285516.html
Copyright © 2020-2023  润新知