多个可取消的文件上传表单，与传统表单提交

Question

我正在尝试构建具有以下条件的文件上传表单。

1. 选择的文件总是添加到要上传的文件列表中，而不是覆盖它，这是<input type="file" multiple />的默认行为

2. 您可以删除已经选择的文件

3. 当您提交表单时，它会像传统的普通提交标记一样刷新整个页面（而不是使用 ajax 更新特定的 html 内容）

1 和 2 可以通过 javascript 插件轻松完成，例如 dropzonejs 和 jquery-fileupload。 这是一个很好的例子，它使用 jquery-fileupload 执行 1 和 2。 (http://jsfiddle.net/eLLWN/24/)

但是所有这些 js 插件都不使用文件输入的 value 字段。它们旨在将选定的文件存储在 javascript 数组中以通过 ajax 发送。

在谷歌搜索之后，我想问两件事。

1. 无法删除选定的文件或在纯文件输入字段中选择其他文件，因为 javascript 的“FileList”对象是只读的。正确吗？

2. 假设上面是正确的，我的解决方法是放弃条件 3. 并用 ajax 的响应替换整个页面内容。你们有谁想出更好的选择吗？

Answer 1

如果您不需要非常复杂的东西，您可以在选择文件时动态添加文件输入，并在所选文件旁边添加一个删除按钮。使用 jQuery 只需要几行代码，例如：

<form method="POST" action="/file-upload" enctype="multipart/form-data">
  <div id="uploads">
  </div>

  <input type="submit" value="Upload!">
</form>


<script id="upload-template" type="text/template">
  <div class="upload">
    <input class="upload-input" type="file" name="file[]">
    <div class="file hidden">
      <span class="filename"></span>
      <button class="delete" type="button">Delete</button>
    </div>
  </div>
</script>


<style>
  .hidden {
    display: none;
  }
</style>

<script>
    $(function() {
      var addUploader = function() {
        var template = $('#upload-template').html();
        $('#uploads').append(template);
      };


      $('#uploads').on('change', '.upload-input', function() {
        var fileName = $(this).val().replace(/^.*[\\\/]/, '');
        $(this).addClass('hidden');
        $(this).siblings('.file').removeClass('hidden');
        $(this).siblings('.file').children('.filename').text(fileName);
        addUploader();
      });

      $('#uploads').on('click', '.delete', function() {
        $(this).parents('.upload').remove();
      });


      addUploader();

    });
</script>

这是一个工作示例：http://jsfiddle.net/d851oxmn/1/