Trying to upload multiple images but its not uploading [duplicate] - html

Question

I am using this following code, where user can upload one or multiple files and can delete those files. All the data is stored in form_data.
Untill now I am not able to make the file upload functionality working.
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: "upload.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);
}
})
})
});
</script>
upload.php
<?php
//upload.php
var_export($_FILES); // this final output that i want to upload
?>

Answer 1

HTML
<div class="col-md-6" align="right">
<label>Select Multiple Files</label>
</div>
<div class="col-md-6">
<input type="file" name="files" id="files" multiple />
</div>
<div style="clear:both"></div>
<br />
<br />
<div id="uploaded_images"></div>
JavaScript
$('#files').change(function(){
var files = $('#files')[0].files;
var error = '';
var form_data = new FormData();
for(var count = 0; count<files.length; count++)
{
var name = files[count].name;
var extension = name.split('.').pop().toLowerCase();
if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
{
error += "Invalid " + count + " Image File"
}
else
{
form_data.append("files[]", files[count]);
}
}
if(error == '')
{
$.ajax({
url:"url",
method:"POST",
data:form_data,
contentType:false,
cache:false,
processData:false,
beforeSend:function()
{
$('#uploaded_images').html("<label class='text-success'>Uploading...</label>");
},
success:function(data)
{
$('#uploaded_images').html(data);
$('#files').val('');
}
})
}
else
{
alert(error);
}
});
Not same as your question but you can try like this.

Answer 2

Here is your working code.
There were several problem with your code
Incorrect brace closing in ajax call.
Your name field in form data was invalid
You were requesting form_data as index in the $_FILES array
No use of number variable
index.php
<input id="avatar" type="file" name="avatar[]" multiple="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();
/* WHEN YOU UPLOAD ONE OR MULTIPLE FILES */
$(document).on('change','#avatar',function(){
$('.preview').html("");
len_files = $("#avatar").prop("files").length;
for (var i = 0; i < len_files; i++) {
var file_data = $("#avatar").prop("files")[i];
form_data.append("avatar[]", file_data);
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: "upload.php",
dataType: 'image/png',
cache: false,
contentType: false,
processData: false,
data: form_data, // Setting the data attribute of ajax with form_data
type: 'post',
success: function(data) {
//console.log("data")'
}
});
});
});
</script>
upload.php
<?php
//upload.php
$output = '';
if(is_array($_FILES) && !empty($_FILES['avatar']))
{
foreach($_FILES['avatar']['name'] as $key => $filename)
{
$file_name = explode(".", $filename);
$allowed_extension = array("jpg", "jpeg", "png", "gif");
if(in_array($file_name[1], $allowed_extension))
{
$new_name = rand() . '.'. $file_name[1];
$sourcePath = $_FILES["avatar"]["tmp_name"][$key];
$targetPath = "uploads/".$new_name;
move_uploaded_file($sourcePath, $targetPath);
}
}
$images = glob("uploads/*.*");
foreach($images as $image)
{
$output .= '<div class="col-md-1" align="center" ><img src="' . $image .'" width="100px" height="100px" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';
}
echo $output;
}
?>