mit AJAX

Question

So habe ich diese Anordnung, die einige Bilder enthält:

var images = [image1, image2, image3] 

Die Bilder sind in Form von Dateien. Wie kann ich diese Bilder auf eine PHP-Datei

Die Folge Code arbeiten mit AJAX nicht senden:

$.ajax({ 
    url: 'PHP/posts.php', 
    type: 'post', 
    data: {data: images}, 
    success: function(data) { 
     alert(data); 
     location.reload(); 
    } 
    }); 

Mein HTML:

<div id="newPostFile"> 
    <label for="newPostFiles"><i class="fa fa-file-text-o" id="newPostFileIcon" aria-hidden="true"></i></label> 
    <input type="file" name="newPostFiles" id="newPostFiles"> 
</div> 

Also, was ich im Grunde erreichen wollen, ist, dass Ich wähle eine Datei einzeln aus und fügt sie dem Array hinzu. Wenn ich auf "Senden" klicke, werden alle Dateien gleichzeitig hochgeladen. Der Grund, warum ich nicht mehrere verwendet haben ist wegen anderer Probleme, die ich gestoßen, die mich Verzögerung

Answer 1

Sie haben Dateien, die als Formdata senden

var images = [image1, image2, image3] 
var data = new FormData(); 

images.forEach(function(image, i) { 
    data.append('image_' + i, image); 
}); 

$.ajax({ 
    url: 'PHP/posts.php', 
    type: 'post', 
    data: data, 
    contentType: false, 
    processData: false, 
    success: function(data) { 
     console.log(data); 
     location.reload(); 
    } 
}); 

Aber wie Sie die Seite trotzdem sind Nachladen, warum Einsatz Ajax überhaupt?

Answer 2

Sicherstellen, dass die Funktion PHP/posts.php den gleichen Parameter enthält als Datenwerte

Answer 3

Verwenden FormData Objektdateien mit Ajax zu senden. new FormData($('#your_form_id')[0]) automatisch anhängt alle Formulareingaben in FormData Objekt, das wir durch manuelles formData.append('file1',file1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
let formData = new FormData($('#your_form_id')[0]); 
    $.ajax({ 
     url: 'PHP/posts.php', 
     type: 'POST', 
     data: formData, 
     dataType:'json', 
     processData: false, 
     contentType: false, 
     success: function(response) { 
      console.log(response); 
      location.reload(); 
     }, 
     error: function() { 
      console.log('fail'); 
     } 
    }); 
</script> 

Answer 4

Sie passieren kann ein JSON-Objekt in PHP getan werden kann, die hier die komfortable Lösung

var data ={'image1':image1,'image2':image2}; 

wäre Sie können dieses Objekt an den PHP-Code übergeben und dann analysieren:

Übergeben Sie das Objekt als Zeichenfolge:

AJAX-Aufruf:

$.ajax({ 
    type : 'POST', 
    url  : 'PHP/posts.php', 
    data : {result:JSON.stringify(data)}, 
    success : function(response) { 
     alert(response); 
    }  
}); 

Sie können die Daten an den result.php bestanden Griff:

$data = $_POST["result"]; 
$data = json_decode("$data", true); 

//just echo an item in the array 
echo "image1 : ".$data["image1"]; 

---

Eine weitere Option vor dem Senden würde das Array Serialisierung, oder es umwandeln in eine Komma getrennte Zeichenfolge mit array.join, dann parse/split auf die posts.php

array.join(",")