Wie sende ich Dateien mit Ajax?

Question

Ich möchte Dateien mit Ajax hochladen.

Ich habe Dropzone und Ajaxupload versucht, aber beide Bibliotheken funktionieren nicht.

Also habe ich versucht, es alleine zu machen. Hier ist meine Eingabe Dateityp-Code:

<input id="le_images" class="form-control" type="file" name="images[]" multiple> 

und hier ist mein jQuery-Code

$('#le_images').change(function(){ 
    var file_data = $(this).prop("files"); 
     $.ajax({ 
      url:"upload.php", 
      type:'POST', 
      data:{ 
       'file' : file_data 
      }, 
      success:function(results){ 

      } 
     }); 
}); 

Jetzt habe ich diese Dateien auf upload.php mit obigem Code sandte. Aber ich habe das nicht erhalten. Kannst du mir sagen, wo ich falsch liege?

Also können Sie mir vorschlagen, wie Sie das tun?

Answer 1

mit Try this:

$('#le_images').change(function(){ 
    var file_data = $(this).prop("files"); 
     $.ajax({ 
      url:"upload.php", 
      type:'POST', 
      data: formData, 
      success:function(results){ 

      } 
     }); 
}); 

Ein einfaches Beispiel bei Upload multiple images using jQuery, Ajax and PHP

Answer 2

Für

Verwendung Bild Update Formupload gegeben

var formData = new FormData($('form')[2]); 

und Sie können das hochgeladene Bild auf Ihren Ordner verschieben und Sie kann das Bild dort sehen

in php

$logoval=$_FILES['userfile']['name']; 
       $target_file = "../".basename($logoval); 
       move_uploaded_file($_FILES['userfile']['tmp_name'],$target_file); 

Answer 3

Wenn Sie Formularelement nicht so hier haben Sie gehen:

<script> 
$(document).on("click", "#fileUpload", function() { 
    var file_data = $("#le_images").prop("files")[0]; 
    var form_data = new FormData(); 
    form_data.append("file", file_data) 

    $.ajax({ 
    url: "upload.php", 
    dataType: 'script', 
    cache: false, 
    contentType: false, 
    processData: false, 
    data: form_data, 
    type: 'post' 
    success: function(data) { 
     console.log(data) 
    } 
    }); 
}); 
</script> 

<input id="le_images" type="file" name="le_images" /> 
<button id="fileUpload" value="Upload" /> 

Answer 4

Ich schlage vor, VanillaJS Framework und AJAX-Technik zu verwenden, um dieses Problem zu lösen. Bedenken Sie auch, dass VanillaJS vollständig in Browsern implementiert ist, und Sie brauchen keine zusätzlichen Dateien für Ihr Projekt

Lets in Code Tauchgang zum Download, in dem ich Ihnen einfaches Beispiel zeigt:

HTML

<input class="form-control" type="file" name="images[]" onclick='uploadMyFiles(); return false;' multiple> 

VanillaJS

function uploadMyFiles() 
{ 
    var formElement = document.querySelector(".form-control"); 
    var formData = new FormData(); 
    for(var i = 0; i < formElement.files.length; i++) 
     formData.append("File"+i, formElement.files[i]); 
    var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.onreadystatechange = function() 
     { 
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
       var responseText = JSON.parse(xmlHttp.responseText); 
     } 
     xmlHttp.open("POST", "--Your URL goes here"); 
     xmlHttp.send(formData); 
}