java前端接收回显图片_图片上传并回显后端篇

图片上传并回显后端篇

我们先看一下效果

继上一篇的图片上传和回显，我们来实战一下图片上传的整个过程，今天我们将打通前后端，我们来真实的了解一下，我们上传的文件，是以什么样的形式上传到服务器，难道也是一张图片?等下我们来揭晓

我们在实战开始前呢，我们先做一下准备工作，比如新建一个java web工程，如果你不懂这个的话，那我建议你先学一下Javaweb，可以去我的公众号找一下这方面的教程。我们就给我们的工程起名为UpImg，我们再给他建一个web包和util包，再把我们以前前端做的图片回显的代码拷到工程里，我们来看一下项目

我们发布一下项目来看一下

这样的话，我们基本的框架就做好了，我们今天就先用form表单来实战一下图片的上传，下一期我们就通过ajax来实现异步图片上传，我们先给我们的前端代码加点料

这个样式我就不再美化了，我们来看一下效果

这样的话，我们前端基本就完成了，我来讲解一下部分代码吧；表单的enctype属性：

1、默认属性：application/x-www-form-urlencoded，只处理表单域中的value属性值，采用这种编码的方式的表单会将表单域的值处理成url编码方式

2、multipart/form-data，这种编码方式的表单会以二进制流的方法来处理表单数据。这种编码方式会将文件域指定文件的内容也封装到请求参数里

3、text/plain，这种方式主要适用于直接通过表单发送邮件的方式

接下来我们讲解一下文件上传的思路，

1、先是表单提交

2、对数据和附件进行二进制编码

3、servlet中使用二进制流获取内容

思路我们已经知道了，那我们就开始编码吧

我们先在util包下新建一个类，我就起名为UpImgUtils，接下来我们就编码吧

package util;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import javax.servlet.http.HttpServletRequest;

/**

* upload Img Utils

*

* @author admin

*

*/

public class UpImgUtils {

/*

* 思路 1、从request当中获取流信息

* 2、新建一个临时文件,用输出流指向这个文件

* 3、关闭流

*/

public static void keepFile(HttpServletRequest re