Question

我尝试使用以下条件构建文件上传表单。

所选文件始终会添加到要上传的文件列表中，而不是覆盖它，这是<input type="file" multiple />的默认行为
您可以删除已选择的文件
当您提交表单时，它会像传统的普通提交标记一样刷新整个页面（而不是使用ajax更新特定的html内容）

1和2可以通过javascript插件轻松完成，例如dropzonejs和jquery-fileupload。这是一个用jquery-fileupload做1和2的好例子。（http://jsfiddle.net/eLLWN/24/）

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

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

无法删除所选文件或在普通文件输入字段中选择其他文件，因为javascript＆＃34;＆＃34; FileList＆＃34;对象是只读的。正确的吗？
假设上面的内容是正确的，我的解决方法是放弃条件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/

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

1 个答案: