1. ホーム
  2. Web プログラミング
  3. AJAX関連

ajaxを使ったSpring Bootベースの画像アップロード

2022-01-18 13:43:23

効果は以下の通りです。

1. スタートアップクラスに追加

SpringBootはaddResourceHandlersを書き換えて、ファイルパスをマッピングします。

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

静的リソースパスの設定

2. フォームフロントエンドページ

<input type="file" name="file" id="file">
<p id="url"><img src="" width=200></p>
<input type="button" id="button" value="upload" >
$(function () {
    $("#button").click(function () {
      var form = new FormData();
      form.append("file", document.getElementById("file").files[0]);
       $.ajax({
         url: "/stu/upload", //backend url
         data: form,
         cache: false,
         async: false,
         type: "POST", //type, POST or GET
         dataType: 'json', //data return type, can be xml, json, etc.
         processData: false,
         contentType: false,
         success: function (data) { //success, callback function
           if (data) {
           var pic="/imctemp-rainy/"+data.fileName;
           $("#url img").attr("src",pic);
           // alert(JSON.stringify(data));
           } else {
           alert("failed");
           }
         },
         error: function (er) { //fail, callback function
         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(); 
 }
 // Handle file uploads
  @ResponseBody // return json data 
  @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();//instantiate json data
 
  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    
  
  }  
 
  // return json
    return jo;  
  }  

概要

上記は、アップロード画像機能を実現するためにajaxの使用に基づいて、Spring Bootへの小さな導入であり、私はそれがあなたの助けになることを願って、あなたが何か質問があれば私にメッセージを与えてください、私は速やかに皆に返信されます。ここでも、スクリプトの家庭のウェブサイトのサポートを非常にありがとうございました
この記事がお役に立つと思われる方は、出典を明記の上、ご自由に転載してください!ありがとうございました。