恢复在文件输入中选择的文件

Question

我有图像提交表格。允许用户选择照片，然后照片在页面上显示为预览，并且用户可以根据需要将其删除。这是页面截图：

当用户选择照片时，我将其保存到数组中，如下所示：

const img_max = 10;
let reader = new FileReader();
let files = [];  // user photos stored here
reader.onload = function (e) {
  $('#img_'+files.length).attr('src', e.target.result);
  $('#img_container_'+files.length).css('display', 'inline-block');
};

function readURL(input) {
  if (input.files && input.files[0]) {
    reader.readAsDataURL(input.files[0]);
    files.push(input.files[0]);
  }
}

$("#img_input").change(function() {
  if (files.length < img_max)
    readURL(this);
});

function deleteImg(index)
{
  let cur, next;
  for (let c = index; c < img_max; c++)
  {
    cur = $('#img_'+c);
    next = $('#img_'+(c+1)).attr('src');
    if (next == null) {
      cur.attr('src', null);
      $('#img_container_'+c).hide();
      break;
    }
    cur.attr('src', next);
  }
  files.splice(index, 1);
}

我使用Yii2模型表格提交数据。我想做的是通过<input type='file' name='SubmitForm[photos]' ...提交它们，以便以后将它们保存在服务器上。主要问题是，如果用户决定从预览中删除图片，或者在两个单独的文件选择中添加照片，则仅发布最新选择而不进行编辑。所以我尝试这样做：

$('#form').submit(function (e)
    {
      let input = ($('#img_input'))[0];
      for (let c = 0; c < files.length; c++)
        input.files[c] = files[c];
      return true;
    });

但是它不起作用，输入的照片与上次选择的照片相同。同样，我很好奇如果服务器上的表单验证由于某种原因失败而又该如何恢复它们，因为我认为我无法再次简单地回显$model->photos。

我不介意对此使用不同的方法，但是我主要希望所有这些都可以在服务器上以该形式进行验证。发布files对象的File个数组可能是一个更好的主意，但是我不知道如何从js中做到这一点。或者，我可能会一直使用10个隐藏的输入字段并一直交换，但这听起来不对。非常感谢。