【問題】
単体ファイルアップロードは成功しましたが、複数ファイルアップロードで、フォーム送信がうまくいきません。
【詳しく…】
htmlのformタグの属性としてenctype="multipart/form-data"を適用し、かつinput属性のところにmultiple属性を適用しました。
JSP
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ファイルアップロードサンプル</title> 6 </head> 7 8 <body onload="updateSize();"> 9 <form name="uploadingForm" enctype="multipart/form-data" action="/" method="POST"> 10 <p> 11 <input id="fileInput" type="file" name="uploadingFiles" onchange="updateSize();" multiple> 12 ファイル選択: <span id="fileNum">0</span>; 13 ファイルサイズ: <span id="fileSize">0</span> 14 </p> 15 <p> 16 <input type="submit" value="ファイルアップロード"> 17 </p> 18 </form> 19 <div> 20 <div>ファイルアップロード:</div> 21 <#list files as file> 22 <div> 23 ${file.getName()} 24 </div> 25 </#list> 26 </div> 27 <script> 28 function updateSize() { 29 var nBytes = 0, 30 oFiles = document.getElementById("fileInput").files, 31 nFiles = oFiles.length; 32 for (var nFileId = 0; nFileId < nFiles; nFileId++) { 33 nBytes += oFiles[nFileId].size; 34 } 35 36 var sOutput = nBytes + " bytes"; 37 for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) { 38 sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)"; 39 } 40 document.getElementById("fileNum").innerHTML = nFiles; 41 document.getElementById("fileSize").innerHTML = sOutput; 42 } 43 </script> 44 </body> 45</html>
コントローラクラス
JAVA
1import org.springframework.stereotype.Controller; 2import org.springframework.ui.Model; 3import org.springframework.web.bind.annotation.RequestMapping; 4import org.springframework.web.bind.annotation.RequestMethod; 5import org.springframework.web.bind.annotation.RequestParam; 6import org.springframework.web.multipart.MultipartFile; 7 8import java.io.File; 9import java.io.IOException; 10 11@Controller 12public class UploadingController { 13 public static final String uploadingdir = System.getProperty("user.dir") + "/uploadingdir/"; 14 15 @RequestMapping("/") 16 public String uploading(Model model) { 17 File file = new File(uploadingdir); 18 model.addAttribute("files", file.listFiles()); 19 return "uploading"; 20 } 21 22 @RequestMapping(value = "/", method = RequestMethod.POST) 23 public String uploadingPost(@RequestParam("uploadingFiles") MultipartFile[] uploadingFiles) throws IOException { 24 for(MultipartFile uploadedFile : uploadingFiles) { 25 File file = new File(uploadingdir + uploadedFile.getOriginalFilename()); 26 uploadedFile.transferTo(file); 27 } 28 29 return "redirect:/"; 30 } 31}
確認用のためjavascriptでファイルサイズとファイル数があがっているのかの確認ソースを追加しました。ファイル選択ボタンを押下し、エクスプローラでファイルを選択します。もうもう一度エクスプローラを開いてファイルを選択し、ファイル数が二個になっていることを確認した上で、ファイルアップロードボタンを押した。確認すると一個しかファイルがアップロードされていなかった。ファイル数をラベルで確認しても二個アップロードしたはずが、一つしかファイルがアップロードされていなかった。何が原因が全く分からず、なぜこのような現象が起きているのかわかる方教えてください。宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー