文件异步上传

文件上传总结

三要素

1. post方式上传

2. enctype=“multipart/form-data”

3.input标签里面要有type类型要为file

实现

 <div class="layui-form-item">
      <label class="layui-form-label">图片</label>
      <div class="layui-input-block">
                <#---->
           <input type="file" id="img" value="上传图片" onchange="imgc(this)">
           <img src="" id="im" width="40px" height="40px">
           <input name="imgFile" type="hidden" id="imgFile"><br><br>
      </div>
 </div>

<script>
    function imgc(fi) {
        var file = fi.files[0];
        // 这是一个 标识  key
        var fd = new FormData();
        fd.append("img", file);
        $.ajax({
            url: "/goods/aaa",
            type: "POST",
            contentType: false,
            processData: false,
            data: fd,
            success: function (data) {
                console.log(data)
                $("#im").prop("src", "/image/goods/" + data.file);
                $("#imgFile").val(data.file)
            },
            error: function () {
                alert("上传失败")
            }
        })
    }
</script>

controller接收

@RequestMapping("aaa")
    @ResponseBody
    public Map<String, String> Add(MultipartFile img) throws IOException {
        String fileName = img.getOriginalFilename();
        img.transferTo(new File("E:\\maven\\svn\\admin\\src\\main\\resources\\static\\image\\goods\\" + fileName));
        System.out.println("fileName 11111111111111111111111111111111= " + fileName);
        Map<String, String> map = new HashMap<>();
        map.put("file", fileName);
        return map;
    }

    @RequestMapping("add")
    public String add(Goods goods) {
        int i = goodsService.addGoods(goods);
        if (i == 1) {
            System.out.println("添加成功");
            return "redirect:/goods/show";
        } else {
            return "add";
        }
    }