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. 送信ボタンタイプ = "ボタン"であれば、データを送信した後、ページを一旦更新します。
以上、本記事の内容をご紹介しましたが、学習の一助となり、より多くのスクリプト・ホームを支持していただけることを願っています。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン