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

Question

我正在使用 PHP 进行多图像上传。在进行预览时，我还提供了删除图像的按钮。

我的代码如下:

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);
});

正如您从我的代码中看到的，我已经成功地从列表中删除了特定文件，方法是首先保存到数组，然后仅使用 splice() 进行删除。

所以，我的问题是，是否可以将 php $_FILES 数组值与 newFileList 数组值一起分配？由于删除仅在 javascript 端起作用，因此不会影响 php 数组的文件输入中的列表。

Answer 1

输入的文件列表是只读的，这就是 $_FILES 全局设置的方式。

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

但是，您可以设置一个隐藏元素来存储“已删除”的文件，并在发布时在 PHP 中过滤它们。

考虑以下示例:

当使用删除按钮时，它将文件名添加到一个数组中，该数组被隐藏元素中的 JSON 字符串覆盖。

发布时，循环遍历 $_FILES 全局变量，如果文件名位于删除列表中，则不处理它。

当然，您会希望上传不那么松散且更安全，但我希望这能给您带来启发。

(我尚未对此进行测试，因此您可能需要进行调整。)

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]
}