Resim, HTML formu kullanmadan ajax POST yoluyla yükleme

Question

HTML'de form kullanmadan bir PHP dosyasına POST yöntemiyle bazı veriler göndermeye çalışıyorum. Bu benim sahip olduğum kod. Neden bir şey yapmıyor? imgupload.php günü

<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> 

Ben HTML form yöntemini kullanıldığında bu

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

gibi POST verileri İşe yaradı olsun. Burada neyin var?

Answer 1

FormData.append() anahtar-değer çiftleri sürer, bu nedenle bu yanlıştır: Eğer böylece bir olay işleyicisi içinde bu kodu koymak gerektiğini den

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

Appart:

myFormData.append(file,gid,user); 

Sen gibi bir şey gerekiyor İhtiyacınız olduğunda tetikler. Örneğin

:

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

Ve muhtemelen de document.ready bloğunun içinde koymak gerekir.