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ウィンドウで複数のファイルを選択すると、それらはすべてサーバーに投稿されます
  • 複数のファイルをドロップゾーンにドラッグできません -フォームに投稿されません

サーバーログを見ると、ファイル配列が投稿されていることがわかりますが、ドロップゾーンにドロップしたファイルは含まれていません。

これが私の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. ドロップは期待どおりに機能します

誰かがこれに光を当てることができますか？ファイル配列に各添付ファイルを追加する必要があると思いますが、方法がわかりません。

4

0 に答える 0