文件上传上传的文件到哪里?

执行步骤如下

1.     客户端发起请求上传图片

2.     服务端打开文件上传入口

3.     服务端接收客户端发来的base64字节码的数据

4.     服务端判断文件的是什么样的文件 比如说图片 视频 压缩包等

5.     服务端获取到客户端上传的文件名字

6.     服务端创建一个文件名字就是客户端获取到的名字

7.     将base64字节码数据复制到这个文件里面

8.     释放服务端资源

9.     返回到客户端

大概的执行路径如上

有一个难点

    如何处理base64字节码数据

---

创建一个maven项目

文件上传涉及到字节码javax包里面是没有这个的扩展的所以我们需要导入jar包

commons-fileupload

commons-io

导入这两个jar包

之前写邮箱也是有很多人反馈说为什么使用maven项目这样就不用下载jar包

那这里就用maven项目

在pom文件里面导入这几个坐标

     <dependency>      <groupId>commons-fileuploadgroupId>      <artifactId>commons-fileuploadartifactId>      <version>1.3.1version>    dependency>    <dependency>      <groupId>commons-iogroupId>      <artifactId>commons-ioartifactId>      <version>2.4version>    dependency>    <dependency>        <groupId>javax.activationgroupId>        <artifactId>activationartifactId>        <version>1.1version>    dependency>    <dependency>        <groupId>org.apache.lucenegroupId>        <artifactId>lucene-coreartifactId>        <version>8.6.3version>    dependency>    <dependency>        <groupId>javax.servletgroupId>        <artifactId>javax.servlet-apiartifactId>        <version>4.0.1version>        <scope>providedscope>    dependency>

使用maven的话我们就使用tomcat插件来运行 就不用外部安装tomcat

<build>        <plugins>            <plugin>                <groupId>org.apache.tomcat.mavengroupId>                <artifactId>tomcat7-maven-pluginartifactId>                <configuration>                                     <port>8080port>                                        <path>/path>                configuration>            plugin>        plugins>    build>

---

在webapp下面创建一个upload文件夹

之前我们老师问过我喜欢先写前端还是后端

那这里我就先写前端

创建一个jsp文件

这里有人可能会问为啥要用jsp HTML不行吗?

解释一下 HTML前端处理数据需要写比较多js脚本我懒得写 用jsp会更方便

这是主体代码

<input type="hidden" value="" id="fileName" />  <img src="upload/1001051.jpg" width="400px" height="400px" id="imgfile" />    <form id="myform" action="fileupload" method="post"    enctype="multipart/form-data">    <input type="file" name="myfile" value="" id="file"><br>  form>  <input type="button" id="fileup" value="提交">

这是script代码

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.js">script><script>  $(function() {    $('#fileup').click(function() {      $('#myform').submit();    })  })script>

当点击fileup就提交用户选择上传的图片你也可以在这里做一些限制比如说只能上传图片 什么的

回到后端

创建一个FileServle的servlet

首先前端传过来的文件到了后端后端只是拿到了这个base64的字节码

有个属性

    文件上传后保存在哪里呢?

    uploadPath 赋值给到绝对路径upload也就是我前面让大家创建的upload

我们在类上面加一个注解

用这个注解就不需要配置web.xml文件也能找到这个servlet

接下来就是处理这个字节码数据

try {      // 创建一个操作文件的工厂      DiskFileItemFactory factory = new DiskFileItemFactory();      // 设置缓冲区大小，这里是4kb      factory.setSizeThreshold(4096);      // 设置缓冲区目录 也就是那个文件对象      factory.setRepository(tempPathFile);      // 创建一个文件上传处理程序      ServletFileUpload upload = new ServletFileUpload(factory);      // 设置上传的文件最大的大小      upload.setSizeMax(4194304); // 设置最大文件尺寸，这里是4MB      // 遍历一下request带来的文件      List items = upload.parseRequest(request);      // 获得迭代器对象      Iterator i = items.iterator();      // 初始化一个文件名字熟悉      String fileName = null;      // 进行遍历      while (i.hasNext()) {        // 遍历到没一个文件        FileItem fi = (FileItem) i.next();        fileName = fi.getName();        // 当文件名字不为空则说明我们拿到了前端上传过来的文件        if (fileName != null) {          // 保存文件名到reqeust域中          request.setAttribute("fileName", fileName);          // 创建一个文件,名字就是fi.getName()          File fullFile = new File(fi.getName());          // 保存到绝对路径uploadPath,名字叫做fullFile.getName();          File savedFile = new File(uploadPath, fullFile.getName());          // 操作完这个文件开始下一轮的文件操作          fi.write(savedFile);        }      }      // 通过reqeust跳转到jsp页面      request.getRequestDispatcher("/index.jsp").forward(request, response);    } catch (Exception e) {      // 可以跳转出错页面      e.printStackTrace();    }

后端写完了回到前端需要修改一下js内容

隐藏域的value修改为${request.getfileName()}

js判断域里面是否有这个文件的名字 有的话将路径修改为这个文件的名字

来看看测试效果

选择到文件

这个时候

这个选择文件这里就会显示这个文件的名字

点击提交

可以看到这个图片已经修改然后再去服务器看看有没有这个图片

可以看到我的服务器有这个文件

这个文件也是这张图片

那么到这里文件上传也结束了

总结:

    处理文件的时候我一直在说base64字节码 但是全场没有看到任何base64字节码为什么  

        首先 字节码是一串数据 这一串数据是不可能给你写到源码里面去 那么我们怎么找到呢

当遍历到这个文件的时候就拿到了这个字节码

源码请在公众号回复文件上传