js选择多张照片回显并上传

之前写过上传图片的相关需求，回显是图片上传到服务器后返回的路径，这回来个不一样的，选择图片之后直接用js的内置文件流回显出来再在form表单里同一提交数据，上传图片，接下来上代码

//样式就不写了，各位喜欢什么样式自己写，或者直接找个前端框架都有了
HTML：
<form id="myForm" method="post" enctype="multipart/form-data" >
    <p>选择图片</p>
    <!--
        accept：可接受文件类型，不写就是可以上传所有文件
        多选图片上传的话一定要带上multiple属性，或者multiple = "multiple"
      -->
    <input type="file" accept="image/jpeg,image/png" multiple name="file" onchange="previewFile()"/>
    <!--回显图片的地方-->
    <div id="imgDiv"></div>
    <button onClick="doSubmit();" type="button">确认</button>
</form>

JavaScript：
<script type="text/javascript">
    function previewFile() {
        //清空回显区域，否则每次都会向后拼接
        $("#imgDiv").html("");
        //获取文件对象
        var file = document.querySelector('input[type=file]').files;
        if (file) {
            //如果有对象，向下执行
            if (file.length == 1) {
                //如果只选择一张图片，直接通过js内置文件流回显出来
                var reader = new FileReader();
                reader.onloadend = function () {
                    var html = "<img src="+reader.result+" />";
		    $("#imgDiv").html(html);
                }
                reader.readAsDataURL(file[0]);
	    } else if (file.length > 1) {
                //多张图片，循环回显
                for (var i = 0; i < file.length; i++) {
                    read(file[i]);
		}
            }
        } else {
            //如果没有，为空
            preview.src = "";
        }
    }

    function read (file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            var html = "<img src="+reader.result+" />";
            $("#imgDiv").append(html);
	}
    }

    //提交数据
    function doSubmit() {
        var formData = new FormData($("#myForm")[0]);
        $.ajax({
            type: 'POST',
            url: '/addData',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result){
                if (result.state == 200) {
                    alert('添加成功');
                } else {
                    alert(result.msg);
                }
                return false;
            }
        });
        return false;
    }
</script>

Java：
@RequestMapping(value = "/addData",produces= MediaType.APPLICATION_JSON_UTF8_VALUE)
@ResponseBody
public BaseResult addData (HttpServletRequest request MultipartFile[] file) {
    //MultipartFile[] file获取多张图片；MultipartFile file获取一张图片
    //上传服务器路径
    String path = request.getSession().getServletContext().getRealPath("/haha");
    File filepath = null;
    for (int i = 0; i < file.length; i++) {
        if (!file[i].getOriginalFilename().isEmpty()) {
            filepath = new File(path, file[i].getOriginalFilename());
            try {
                file[i].transferTo(new File(path + file[i].getOriginalFilename()));
                //上传的时候发现了一个问题，如果把图片名称改成生成时间戳后重命名上传，可能会导致上传的文件相同，小编纠结了好久发现原来是我的服务器运行太快，下一个图片生成的图片名称和上一个一样，我也是很懵圈，时间戳都生成到毫秒了还能出这问题，于是机智的我想出了一个办法,每次上传一张照片后咱让程序睡一秒，就没有这个问题了
                //sleep(1000);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    if (filepath != null) {
        if(!filepath.getParentFile().exists()){
            filepath.getParentFile().mkdirs();
        }
    }
    //返回类型随便定义，不一定要抄我的。温馨提示：后端返回值和我不一样时，前端判断也要改一下
    return BaseResult.ok();
}

GAMEOVER~有不成功的可以给我留言，不对的地方请大佬们指正！！！