当前位置 博文首页 > 基于Spring Boot利用 ajax实现上传图片功能

    基于Spring Boot利用 ajax实现上传图片功能

    作者:msfh 时间:2021-08-16 17:50

    效果如下:

    1.启动类中加入

    SpringBoot重写addResourceHandlers映射文件路径

    @Override
     public void addResourceHandlers(ResourceHandlerRegistry registry) {
       registry.addResourceHandler("/imctemp-rainy/**").addResourceLocations("file:D:/E/");
     }

    设置静态资源路径

    2.   表单 前端 页面

    <input type="file" name="file" >
    <p ><img src="" width=200></p>
    <input type="button"  value="上传" >
    $(function () {
        $("#button").click(function () {
          var form = new FormData();
          form.append("file", document.getElementById("file").files[0]);
           $.ajax({
             url: "/stu/upload",    //后台url
             data: form,
             cache: false,
             async: false,
             type: "POST",          //类型,POST或者GET
             dataType: 'json',       //数据返回类型,可以是xml、json等
             processData: false,
             contentType: false,
             success: function (data) {   //成功,回调函数
               if (data) {
               var pic="/imctemp-rainy/"+data.fileName;
               $("#url img").attr("src",pic);
               // alert(JSON.stringify(data));
               } else {
               alert("失败");
               }
             },
             error: function (er) {     //失败,回调函数
             alert(JSON.stringify(data));
             }
           });
        })
      })

    控制器

    public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {    
     File targetFile = new File(filePath); 
     if (!targetFile.exists()) {
       targetFile.mkdirs();  
     }    
     FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);
     out.write(file);   
     out.flush();  
     out.close(); 
     }
     //处理文件上传
      @ResponseBody //返回json数据 
      @RequestMapping(value = "upload", method = RequestMethod.POST) 
      public JSONObject uploadImg(@RequestParam("file") MultipartFile file,HttpServletRequest request) {    
        String contentType = file.getContentType(); 
        System.out.print(contentType);
      String fileName = System.currentTimeMillis()+file.getOriginalFilename();  
      String filePath = "D:/E";
       JSONObject jo = new JSONObject();//实例化json数据
     
      if (file.isEmpty()) {  
       jo.put("success", 0);
       jo.put("fileName", "");
      }    
      try { 
        uploadFile(file.getBytes(), filePath, fileName); 
        jo.put("success", 1);
        jo.put("fileName", fileName);
       // jo.put("xfileName", filePath+"/"+fileName);
      } catch (Exception e) { 
      // TODO: handle exception    
      
      }  
     
      //返回json
        return jo;  
      }  

    总结

    以上所述是小编给大家介绍的基于Spring Boot利用 ajax实现上传图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站长博客网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    jsjbwy
    下一篇:没有了