I have an array $_FILES
it can store multiple images.
When I use print_r($_FILES)
after storing two images in this array it gives me following output:
Array ( [IMG_20170304_224950_jpg] => Array ( [name] => IMG_20170304_224950.jpg [type] => image/jpeg [tmp_name] => C:\wamp64\tmp\php4584.tmp [error] => 0 [size] => 4098228 ) [IMG_20170305_075610_jpg] => Array ( [name] => IMG_20170305_075610.jpg [type] => image/jpeg [tmp_name] => C:\wamp64\tmp\php4602.tmp [error] => 0 [size] => 5314040 ) )
In this I want to echo
both of two images.
This is how my code looks like:
index.php
<input id="avatar" type="file" name="avatar[]" multiple />
<button id="upload" value="Upload" type="button">upload</button>
<div class="preview">
</div>
<div class="return_php"></div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>
<script>
$(document).ready(function(){
var form_data = new FormData();
var number = 0;
/* WHEN YOU UPLOAD ONE OR MULTIPLE FILES */
$(document).on('change','#avatar',function(){
console.log($("#avatar").prop("files").length);
len_files = $("#avatar").prop("files").length;
for (var i = 0; i < len_files; i++) {
var file_data = $("#avatar").prop("files")[i];
form_data.append(file_data.name, file_data);
number++;
var construc = '<img width="200px" height="200px" src="' + window.URL.createObjectURL(file_data) + '" alt="' + file_data.name + '" />';
$('.preview').append(construc);
}
});
/* WHEN YOU CLICK ON THE IMG IN ORDER TO DELETE IT */
$(document).on('click','img',function(){
var filename = $(this).attr('alt');
var newfilename = filename.replace(/\./gi, "_");
form_data.delete($(this).attr('alt'))
$(this).remove()
});
/* UPLOAD CLICK */
$(document).on("click", "#upload", function() {
$.ajax({
url: "target.php",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data, // Setting the data attribute of ajax with form_data
type: 'post',
success: function(data){
$('.return_php').html(data);
}
})
})
});
target.php
<?php
var_dump($_FILES);
print_r ($_FILES);
foreach ($array as $key => $image) {
/* Now you can get each image name */
echo $image['name'];
}
?>