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

AJAXを使ったファイルのアップロード

2022-01-15 14:39:36

この例では、参考のため、AJAXを使用してファイルをアップロードするための具体的なコードを以下のように共有します。

必要条件

フロントエンドページでファイルを選択し、サーバー上の指定された場所にアップロードする。

フロントエンドのコード

<form id="uploadForm" method="post" enctype="multipart/form-data">
   <label >Upload eBook</label>
   <input type="file" name="file" >
   <button id="upload" type="button" name="button" >upload</button>
</form>

$("#upload").click(function () {
   var formData = new FormData($('#uploadForm')[0]);
   $.ajax({
    type: 'post',
    url: "https://****:8443/fileUpload", //the request path for uploading files must be absolute
     data: formData,
     cache: false,
     processData: false,
     contentType: false,
      }).success(function (data) {
        console.log(data);
        alert("Upload successful"+data);
        filename=data;
      }).error(function () {
         alert("Upload failed");
     });
    });

まず、空のオブジェクトであるFormDataインスタンスを作成し、ページ上の既存のフォームの形で初期化します。これを AJAX 経由でバックエンドに送信します。

バックエンドコード

@PostMapping(value = "/fileUpload")
    @ResponseBody
    public String fileUpload(@RequestParam(value = "file") MultipartFile file, Model model, HttpServletRequest request) {
        if (file.isEmpty()) {
            System.out.println("file is empty");
        }
            String fileName = file.getOriginalFilename(); // file name
            System.out.println(file.getOriginalFilename());
            String suffixName = fileName.substring(fileName.lastIndexOf(". ")); // suffix name
            String filePath = "C://pdf//"; // path after upload
            fileName = UUID.randomUUID() + suffixName; // new file name
            File dest = new File(filePath + fileName);
            System.out.println("pdf file path is: "+dest.getPath());
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
                System.out.println("upload pdf file +++++++++++");
                System.out.println("pdf file path is: "+dest.getPath());
            }
            try {
                file.transferTo(dest);
            } catch (IOException e) {
                e.printStackTrace();
            }
            String filename = "/pdf/" + fileName;
          return fileName;


    }

備考

1. RequestParam(value = "file") の file は、input の name 属性と一致する必要があります。
2. 送信ボタンタイプ = "ボタン"であれば、データを送信した後、ページを一旦更新します。

以上、本記事の内容をご紹介しましたが、学習の一助となり、より多くのスクリプト・ホームを支持していただけることを願っています。