AJAX経由のFormDataファイルアップロードの問題

Question

フォームデータが送信されるときに、Ajax設定のFormDataオブジェクトを使用して画像アップロードを実行しようとしていますが、_FILES変数が空のままで、 が取得されます。HTTP_RAW_POST_DATA = [object Object]これについての助けに本当に感謝しています。以下

コードスニペット：

<form id="test_upload_form" action="/inventory/fileImport"> 
 
    <input id="test_file" type="file" name="superfile"> 
 
    <input type="hidden" name="nonce" value="<?=$this->nonceField()?>"> 
 
    <input type="submit" name="submit"> 
 
</form> 
 
<script> 
 
    $('#test_upload_form').on('submit', function(e){ 
 

 
     e.preventDefault(); 
 
     var fileInput = $('#test_file'); 
 
     debugger; 
 
     var file = ($('#test_file'))[0].files[0]; 
 
     var formData = new FormData($(this)); 
 
     formData.append('file', file); 
 
     $.ajax({ 
 
      url: '/inventory/fileImport', 
 
      type: 'POST', 
 
      data: formData, 
 
      cache: false, 
 
      processData: false, // Don't process the files 
 
      contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
 
      success: function(data, textStatus, jqXHR) 
 
      { 
 
       if(typeof data.error === 'undefined') 
 
       { 
 
        console.log(data); 
 
       } 
 
       else 
 
       { 
 
        // Handle errors here 
 
        console.log('ERRORS: ' + data.error); 
 
       } 
 
      }, 
 
      error: function(jqXHR, textStatus, errorThrown) 
 
      { 
 
       // Handle errors here 
 
       console.log('ERRORS: ' + textStatus); 
 
       // STOP LOADING SPINNER 
 
      } 
 
     }); 
 
    }); 
 
</script>

は、すぐ下にJavascriptを改正し、それが今で動作しているようです。 Jqueryでは動作しません。

$('#test_upload_form').on('submit', function(e){ 
 
     e.preventDefault(); 
 
     var file = ($('#test_file'))[0].files[0]; 
 
     var formData = new FormData(document.getElementById("test_upload_form")); 
 
     formData.append('file', file); 
 
     var request = new XMLHttpRequest(); 
 
     request.open("POST", "/inventory/fileImport"); 
 
     formData.append("serialnumber", 'asdasdsadas'); 
 
     request.send(formData); 
 
});

Answer 1

いるFormDataは、標準のJavaScript DOMオブジェクトを待っていると、あなたの代わりに$(this)の

var formData = new FormData(document.getElementById("test_upload_form")); 

を使用してみてくださいまたはあなたにも変換できるjQueryオブジェクト

を使用していますあなたのjQueryオブジェクトを使用して$(this)[0]