js自定义input文件上传样式

文件上传是我们经常会用到的功能，但是原生的input样式太丑了，能不能自定义一个input文件上传样式呢？

我这里写了两种方法，form表单提交跟ajax异步提交都没有问题，自动上传或者点击上传按钮上传也都没问题

先看效果：

代码贴出来： 

方法1

方法2

controller

@PostMapping("upload")
  public ResultModel upload(MultipartFile file) {
    //文件名
    System.out.println(file.getOriginalFilename());
    return ResultModel.of(true);
}

样式还是丑了一点，但这些都不重要，关键是掌握了方法再找个UI小姐姐来帮忙调试，就可以做出任何想要的UI效果啦！