倍数がテーブルにコードを適応しようとすると

Question

に貴様idのアップロードファイル：1つのファイルだけを入力した素晴らしい作品 http://blog.netgloo.com/2015/02/08/spring-boot-file-upload-with-ajax/

（問題なくいくつかのプロジェクトで使用されます）。

私の必要条件は、すべての行にファイルが入力されたテーブルを作成することです。

入力ファイルのIDにコードを追加します。後でコントローラでそのコードを使用します。

は、私は、フォームのIDと入力割り当てられた値に追加テーブル（OK）

<div class="table-responsive" 
      th:if="${not #lists.isEmpty(objects)}"> 
      <table id="d" 
       class="table table-hover table-sm table-responsive "> 
       <thead class="thead-inverse"> 
        <tr> 
         <th>Code</th> 
         <th>Name</th> 
         <th>Address</th> 
         <th>Telephone</th> 
         <th>File Upload</th> 
        </tr> 
       </thead> 

       <tbody> 
        <tr th:each="object: ${objects}"> 
         <td th:text="${object.code}"></td> 
         <td th:text="${object.name}"></td> 
         <td th:text="${object.addres}"></td> 
         <td th:text="${object.telephone}"></td> 
         <td> 
          <form th:id="'uploadfileform-' + ${object.code}"> 
           <div class="form-group"> 
            <label class="custom-file"> <input type="file" 
             th:id="'uploadfileinput-' + ${object.code}" 
             name="uploadfile" accept="*" aria-describedby="fileHelp" 
             class="custom-file-input" /> <span 
             class="custom-file-control"></span> 
            </label> 
           </div> 
          </form> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

を作成します。

私のjqueryの

パート1（OK）

$(document).ready(function() { 
       $('input[type="file"]').change(function(e) { 
        var id = $(this).attr('id'); 
        var res = id.split("-"); 
        // I pass the code 
        uploadFile(res[1]); 
       }); 
     }); 

パート2（失敗）

function uploadFile(id) { 
        $ 
          .ajax({ 
           url : "/uploadFile", 
           type : "POST", 
           data : new FormData($("#uploadfileform"+id)[0]), 
           enctype : 'multipart/form-data', 
           processData : false, 
           contentType : false, 
           cache : false, 
           success : function() { 
            // Handle upload success 
            $("#upload-file-message").text(
              "File succesfully uploaded"); 
            alert("File succesfully uploaded"); 
           }, 
           error : function() { 
            // Handle upload error 
            $("#upload-file-message") 
              .text(
                "File not uploaded (perhaps it's too much big)"); 
            alert("File not uploaded (perhaps it's too much big)"); 
           } 
          }); 
       } // function uploadFile 

私はそれがで失敗したと信じて：

データ：新しいいるFormData（$ （ "#uploadfileform" + id）[0]）、

しかし、私はデバッグする方法を見ることができません。

そして、これはまさにブログのように、コントローラの一部である：私は

を取得し、両方の状況で

data : new FormData($('input[type="file"]')[0]), 

：1つの

変更されたデータ

@RequestMapping(value = "/uploadFile", method = RequestMethod.POST) 
    @ResponseBody 
    public ResponseEntity<?> uploadFile(@RequestParam("uploadfile") MultipartFile uploadfile) { 

UPDATE

POST http://localhost:8080/uploadFile 400() 

の

おかげ

UPDATE 2

$(document).ready(function() { 
       //http://blog.netgloo.com/2015/02/08/spring-boot-file-upload-with-ajax/ 
       $('input[type="file"]').change(function(e) { 

        //var file = $('input[type="file"][0]'); 
        var file = $('input[type="file"]')[0]; 

        alert("File name: " + file.fileName); 
        alert("File size: " + file.fileSize); 

}); 
      }); 

私は未定義得るので、私はこの種のコードは、このような状況のために正しくないと思います。

Answer 1

提供したコードに2つの問題があります。 1つはあなたのサーバーでapplication.propertiesにはupload.file.pathがありません。だから私はあなたのJavaScriptコードでは次の

  $('input[type="file"]').change(function(e) { 
       //id is undefined 
       var id = $(this).attr('id'); 

upload.file.path = ./ 

を追加し、割り当てるIDは、フォームフィールド上ではなく入力です。だから私は、これら二つの変更後

<form th:id="'uploadfileform-'+${directory.code}"> 
    <div class="form-group"> 
     <label class="custom-file"> <input type="file" 
      th:name="uploadfile" accept="*" aria-describedby="fileHelp" 
      class="custom-file-input" th:id="'uploadfileinput-'+${directory.code}"/> <span 
      class="custom-file-control"></span> 
     </label> 
    </div> 
</form> 

に

<form th:id="'uploadfileform-'+${directory.code}"> 
    <div class="form-group"> 
     <label class="custom-file"> <input type="file" 
      th:name="uploadfile" accept="*" aria-describedby="fileHelp" 
      class="custom-file-input"/> <span 
      class="custom-file-control"></span> 
     </label> 
    </div> 
</form> 

の下に更新され、それが