HTMLフォームを使用せずにajax POST経由で画像をアップロード

Question

HTMLでフォームを使用せずにPOSTメソッド経由でPHPファイルにデータを送信しようとしています。これは私のコードです。なぜそれは何もしないのですか？ imgupload.phpで

<input type="file" name="fileToUpload" id="fileToUpload"> 
<input type="hidden" value="<?php echo $row['Gallery_Id']; ?>" name="gid" id="gid"> 
<input type="hidden" value="User" name="user" id="user"> 
<button onclick="myFormData()">Upload Image</button> 
<script> 
      $('#fileToUpload').on('change', function() { 
      var myFormData = new FormData(); 
      var file = document.getElementById('fileToUpload').value; 
      var gid = document.getElementById('gid').value; 
      var user = document.getElementById('user').value; 
      myFormData.append('file', file); 
      myFormData.append('gid', gid); 
      myFormData.append('user', user); 
      }); 

      $.ajax({ 
       url: 'imgupload.php', 
       type: 'POST', 
       processData: false, // important 
       contentType: false, // important 
       dataType : 'json', 
       data: myFormData 
      }); 

      </script> 

私は、HTMLフォームのメソッドを使用する場合それは働いていたこの

$gid = $_POST['gid']; 
$user = $_POST['user']; 

などのPOSTデータを取得します。ここで何が間違っていますか？

Answer 1

FormData.append()は、キーと値のペアを取るので、これは間違っている：

myFormData.append(file,gid,user); 

あなたが何か必要があります：あなたがするようにイベントハンドラ内でこのコードを配置する必要があることから、

myFormData.append('file', file); 
myFormData.append('gid', gid); 
myFormData.append('user', user); 

アパートをそれが必要なときにトリガします。例えば

：

$('#fileToUpload').on('change', function() { 
    // your javascript code 
}); 

そして、あなたはおそらくもdocument.readyブロック内に置く必要があります。