I'm doing a multiple image upload with PHP. When doing the preview, I have provided the button to remove the image as well.
My code is as follow :
HTML
<div class="col-md-12 margin-bottom10">
<input type="file" accept="image/*" name="file_name[]" id="file_name" onchange="preview_image()" class="inputfile" multiple />
<?php echo '<div class="margin-bottom10">'.form_error('file_name').'</div>'; ?>
<label class="btn btn-danger" for="file_name"><i class="fa fa-upload"></i> Choose image to upload</label>
<button type="submit" name="submit" class="btn btn-primary">Create</button>
</div>
<div class="col-md-12 margin-bottom10">
<div class="row" id="image_preview">
</div>
</div>
JAVASCRIPT
var newFileList = null;
function preview_image(){
var total_file=document.getElementById("file_name").files.length;
newFileList = Array.from(event.target.files);
for(var i=0;i<total_file;i++){
$('#image_preview').append("<div class='col-md-2 margin-top10 appendedImg'><img style='width: 100%; height: 130px; object-fit: cover;' src='"+URL.createObjectURL(event.target.files[i])+"'><button class='btn btn-block btn-danger margin-top5 btnRemove' value='"+i+"'>Remove</button></div>");
}
}
$(document).on('click', '.btnRemove', function(){
$(this).closest('.appendedImg').remove();
var id = $(this).val();
newFileList.splice(id,1);
});
As what you can see from my code, I've successfully done with the removing a specific file from the list by saving to an array first then only use the splice()
to delete.
So, my question is, is it possible to assign the php $_FILES
array value with the newFileList
array value? Since, the deletion only working on the javascript side so it doesn't affect the list from the file input of php array.