Question

我有一个HTML表单，用于上传文件。该文件将添加到隐藏文件输入字段。提交表单后，此文件和任何其他参数都将发送到服务器。

该应用程序使用jQuery。

  var filterChildren = function() {
    var value = $(this).val().toLowerCase();
    $(".child").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });    
  };

  $("#search").on("keyup", _.debounce(filterChildren, 300));

我已经阅读了几种方法，但是没有一种方法使用input [type = file] 字段。

如果不使用输入字段，如何存储删除的文件？

我也试图实现这一点：

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

我尝试添加

var data = ev.clipboardData.files;
$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", data);

会抛出

$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", files);

所以看起来“文件” / FileList变成只读的？

请指向正确的方向。

Answer 1

您需要研究JavaScript filereader api。输入类型文件的内容始终为只读，但是您可以读取这些内容，并将其存储在全局数组中（如果要发布多个文件）。

一旦它们位于数组中，您就可以对它们进行所需的操作，例如验证文件类型，大小等...

Answer 2

我们不得不将剪贴板数据更改为dataTransfer

- var data = ev.clipboardData.files;
+ var data = ev.dataTransfer.files;

$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", data);

拖放文件上传

2 个答案: