0

我正在开发一个使用拖放文件处理将文件附加到表单的项目。

表格非常简单：

<form accept-charset="UTF-8" action="..." enctype="multipart/form-data" method="post">
  <input multiple="multiple" name="files[]" type="file" />
  <div id="download-drop"></div>
</form>
  • 我可以在 FilBrowser 窗口中选择多个文件，它们都会发布到服务器
  • 我无法 将多个文件拖入放置区 - 它们未发布到表单

当我查看服务器日志时，我可以看到文件数组已发布，但我放到 dropzone 上的文件不包括在内。

这是我的javascript（实际上是coffeescript）：

class Uploader
  constructor: (drop_zone, upload_button) ->
    @attachments = []

    @$upload_button = $(upload_button)
    @$upload_button.bind 'change', @manual

    @$drop_zone = $(drop_zone)
    @$drop_zone.bind 'dragenter', @noop
    @$drop_zone.bind 'dragexit', @noop
    @$drop_zone.bind 'dragover', @noop
    @$drop_zone.bind 'drop', @drop

    @render()

  # Perform a noop by preventing the default behavior and stopping
  # event propagation.
  noop: (e) ->
    e.stopPropagation()
    e.preventDefault()

  # Handler for when a file is dropped.
  drop: (e) =>
    @noop e

    for file in e.dataTransfer.files
      @attachments.push file

    @render()

  # Handle a manual file upload (using the HTML element)
  manual: (e) =>
    @noop e

    for file in e.currentTarget.files
      @attachments.push file

    @render()

  # Render helper function that redraws the HTML element
  render: =>
    @$drop_zone.html ''

    html = []
    if @attachments?.length > 0
      for attachment, i in @attachments
        html.push attachment.name

    @$drop_zone.html html.join('')

@Uploader = Uploader

我已经研究过的几件事：

  1. 类已创建，两个选择器均已找到并存在
  2. noop按预期工作
  3. 范围都是正确的
  4. Drop 按预期工作

有人可以解释一下吗？我想我需要将每个附件添加到文件数组中，但我不知道如何。

4

0 回答 0