图片上传并回显是一个最基本的功能，本文只简单实现了一个demo,并没有进行复杂的判断，简单记录下操作流程：
js中用到了Formdata：FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)。如果表单enctype属性设为multipart/form-data ，可以用 new formdata对象来模拟submit()方法来发送数据。
前端代码实现：

<img width="100" height="100" id="ImgUrl"/>
<form id="formTag" enctype="multipart/form-data">
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" id="tpfile">
    </div>
</form>

css样式:

<style>
        .uploadImgBtn {
            width: 100px;
            height: 100px;
            cursor: pointer;
            position: relative;
            background: url("img/add.gif") no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
        }
        .uploadImgBtn .uploadImg {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        } 
    </style>

ajax代码实现：

<script>
        $(document).ready(function(){
            $("#tpfile").on("change", upload );
        })
        function upload(){

            var self = this;
            $.ajax({
                url: "/upload/uploadPic.do",
                type: "post",
                dataType: "json",
                cache: false,
                data: new FormData($("#formTag")[0]),
                processData: false,// 不处理数据
                contentType: false, // 不设置内容类型
                success: function(data){
                   $("#ImgUrl").attr("src", data.path);
                   /*
                   图片显示路径出错，没解决：反斜杠转义
                   $(self).parent().css({
                        "background-image": "url("+data.path+")"
                    })*/;
                }
            })
        }
 </script>

后台代码实现：

@RequestMapping("/upload/uploadPic.do")
    public void uploadPic(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {
        try {
            // 获取图片原始文件名
            String originalFilename = file.getOriginalFilename();
            // 文件名使用当前时间
            String name = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());            
            // 图片上传的相对路径（因为相对路径放到页面上就可以显示图片）
            String path = File.separator+"img"+File.separator + name + "_" +originalFilename ;
            System.out.println(path);
            // 图片上传的绝对路径
            String url = request.getSession().getServletContext().getRealPath("") + path;
            File dir = new File(url);
            if(!dir.exists()) {
                dir.mkdirs();
            }
            // 上传图片
            file.transferTo(new File(url));
            // 将相对路径写回（json格式）
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("path",path);
            // 设置响应数据的类型json
            response.setContentType("application/json; charset=utf-8");
            response.getWriter().write(jsonObject.toString());
        } catch (Exception e) {
            //throw new RuntimeException("服务器繁忙，上传图片失败");
            throw new RuntimeException(e);
        }
    }

测试结果：

虽然简单实现了，但json格式转义出错，还没有解决。

=========================华丽的分割线===========================
实现多文件同时上传
文件上传有很多的注意细节：
1、为保证服务器安全，上传文件应该放在外界无法直接访问的目录下，比如放于WEB-INF目录下。
2、为防止文件覆盖的现象发生，要为上传文件产生一个唯一的文件名。
3、为防止一个目录下面出现太多文件，要使用hash算法打散存储。
4、要限制上传文件的最大值。
5、要限制上传文件的类型，在收到上传文件名时，判断后缀名是否合法。
前端实现：

springmvc 多文件上传
<form action="/upload/uploadMulFile.do" enctype="multipart/form-data" method="post" >
    上传文件1：<input type="file" name="files"><br/>
    上传文件2：<input type="file" name="files"><br/>
    <input type="submit" value="提交"/>
</form>

后端代码实现：

   /**
     * 多文件上传
     * @param request
     */
    @RequestMapping("/upload/uploadMulFile.do")
    public String uploadMulFile(@RequestParam("files") MultipartFile []multipartFiles, HttpServletRequest request){

        String path = File.separator+"upload"+File.separator ;
        String realPath = request.getSession().getServletContext().getRealPath("") + path;

        File dir = new File(realPath);
        if(!dir.exists()) {
            dir.mkdirs();
        }

        if(multipartFiles == null || multipartFiles.length == 0){
            return null;
        }
        if(multipartFiles.length>0){
            for (MultipartFile file :multipartFiles){
                try {

                    file.transferTo(new File(realPath + file.getOriginalFilename()));
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
            }
        }
        return "tp";
    }

上传下载文件详细参考博客3.

参考：
1.https://www.cnblogs.com/kongxc/p/7831837.html
2.https://www.jianshu.com/p/18206a94fee5
3.https://www.cnblogs.com/xdp-gacl/p/4200090.html