从php中的数组输入文件列表中删除特定文件

Question

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> &nbsp; Choose image to upload</label>
    &nbsp; <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.

Answer 1

The file list of the input is read only which is how the $_FILES global is set.

See: https://developer.mozilla.org/en-US/docs/Web/API/FileList

However, you could set a hidden element that stores the files that "have been removed" and filter them in PHP on post.

Consider the following example:

When the remove button is used it adds the file name to an array which is covered to a JSON string in a hidden element.

On post, loop through the $_FILES global and if the file name is in the remove list then don't process it.

Of course you'll want to make the uploads less loose and more secure but I hope this gives you the idea.

(I haven't tested this so you may have to adjust.)

HTML

<div class="col-md-12 margin-bottom10">
    <input type="file" accept="image/*" name="file_name[]" id="file_name" class="inputfile" multiple />
    <label class="btn btn-danger" for="file_name"><i class="fa fa-upload"></i> &nbsp; Choose image to upload</label>
    &nbsp; <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>
<input type="hidden" id="removed_files" name="removed_files" value="" />

JavaScript

window.newFileList = [];

$(document).on('click', '.btnRemove', function () {
  var remove_element = $(this);
  var id = remove_element.val();
  remove_element.closest('.appendedImg').remove();
  var input = document.getElementById('file_name');
  var files = input.files;
  if (files.length) {
     if (typeof files[id] !== 'undefined') {
       window.newFileList.push(files[id].name)
     }
  }
  document.getElementById('removed_files').value = JSON.stringify(window.newFileList);
});

$(document).on('change', '#file_name', function (event) {
    var total_file = document.getElementById("file_name").files.length;
    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>");
    }
});

PHP

<?php
$removedImages = json_decode($_POST['removed_files'], true);
foreach ($_FILES['file_name'] as $FILE) {
    if (in_array($FILE['name'], $removedImages)) {
        continue;
    }

    // [import file stuff]
}