springboot 异步上传图片

最新推荐文章于 2025-10-28 13:15:23 发布

原创最新推荐文章于 2025-10-28 13:15:23 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#springboot #ajax #图片上传

web网站开发专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的文件上传功能，包括HTML控件的设置、JavaScript代码逻辑及后端控制器处理过程。通过实例展示了如何限制上传文件类型与大小，并实现了图片的异步上传。

我用的是jQuery.ajaxfileupload.js 稍后弄个网盘链接给大家下载

第一步不多说，导入相应的jar包 jquery.js必须先导入再导入jQuery.ajaxfileupload.js

第二步，html中添加控件：

 <div class="main-btn"><a id="changeImg" href="#" onclick="changeImg();">更换图片</a></div>
 <input type="file" id="img" name="img" style="opacity:0" onchange="sendChange()">
 <input type="submit" style="opacity:0" id="send">

因为初始控件的文件上传样式实在太丑，所以我加了style="opacity:0"用于隐藏，而是另外弄一个div作为显示，通过触发的形式进行上传。

当点击更换图片时触发changeImg()方法，而changeImg()又触发真正的file进行打开选择文件。

当我们选择好图片点击打开时，将会触发onchange="sendChange()"，该方法调用 fileUpload();也就是真正异步用于处理图片上传的。

<script>

           function changeImg(){
         $('#img').click();
      }

           function sendChange(){
               fileUpload();
           }

           function fileUpload() {

               var formData = new FormData();
               formData.append('img',  $('#img')[0].files[0]);

               if(!validate_img($('#img'))){
                   return;
               }

               $.ajax({

                   url: 'http://localhost:8080/file/imgUpLoad',
                   type: 'POST',
                   cache: false,
                   data: formData,
                   processData: false,
                   contentType: false,
                   beforeSend:function(){

                   },

                   success:function(data){

                       alert(data.msg);
                       if(data.code==1){
                       window.location.reload();
               }

                   },

                   error:function(){

                   }

               });

           }


           //限制上传文件的类型和大小
           function validate_img(ele){
               // 返回 KB，保留小数点后两位
               //alert((ele.files[0].size/(1024*1024)).toFixed(2));
               var file = ele.val();
               if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file)){

                   alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
                   return false;
               }else{
                   //alert((ele.files[0].size).toFixed(2));
                   //返回Byte(B),保留小数点后两位
                   if(((ele[0].files[0].size).toFixed(2))>=(2*1024*1024)){

                       alert("请上传小于2M的图片");
                       return false;
                   }else  return true;
               }
               return false;

           }
</script>

完成html，接下来看controller

@Controller
@RequestMapping("/file")
public class FileController {

    private static final Logger logger = LoggerFactory.getLogger(FileController.class);

    //图片上传相关代码
    @RequestMapping(value = "/imgUpLoad")
    @ResponseBody
    public String imgUpLoad(@RequestParam("img") MultipartFile file, HttpServletRequest request) {
        if (file.isEmpty()) {
            return new String("文件为空");
        }
// 获取文件名
        String fileName = file.getOriginalFilename();
        logger.info("上传的文件名为：" + fileName);
// 获取文件的后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        logger.info("上传的后缀名为：" + suffixName);
        if(".jpg".equals(suffixName.trim())||".png".equals(suffixName.trim())){

            // 文件上传后的路径
            String filePath = "D://IDEA//course01//src//main//resources//static//download//img//";//服务器路径
// 解决中文问题，liunx下中文路径，图片显示问题
// fileName = UUID.randomUUID() + suffixName;
            fileName=  UUID.randomUUID().toString().replace("-", "")+".png";
            File dest = new File(filePath +fileName);
// 检测是否存在目录
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();

            }
            try {
                file.transferTo(dest);

            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return new String("上传的不是图片！");
    }

}

以上步骤就能完成该上传功能咯

jQuery.ajaxfileupload.js下载地址

链接：https://pan.baidu.com/s/1uxs9nC60CliFc0xJsQWWrg 密码：u7jt