异步上传图片

1、样式

<input class="btn-large" type="button" onclick="$('#certiimg').click();" value="上传图片"/>
<input type="file" style="display: none" id="certiimg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>

2、js

<script src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>
<script>    
$('#certiimg').on('change', function () {
    var formData = new FormData();
    var file = document.getElementById("certiimg").files[0];
    // 检测文件大小 1024*1024=1048576(1M)
    if (file.size >= 1048576) {
        alert("上传图片大小不得超过1M")
        return false;
    }
    formData.append("file", file);
    $.ajax({
        type: 'POST',
        url: '/test/hello6',
        data: formData,
        contentType: false,
        processData: false,
        async: true,
        success: function (result) {
             alert(result.msg);
            if (result.success) {
                alert(result.data);
            }
        },
        error: function () {

        }
    });
})

</script>

3、后台

@RequestMapping("hello6")
@ResponseBody
public Result hello6(MultipartFile file) {
    String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
    String path = "D:\\pic\\" + UUID.randomUUID() + suffix;
    try {
        file.transferTo(new File(path));
    } catch (IOException e) {
        e.printStackTrace();
        return ResultUtil.error("上传失败");
    }
    return ResultUtil.success("上传成功",path);
}