jquery - HTML5 Drag-And-Drop DataTransfer: データを時々ファイルに、時にはアイテムにドラッグ

Question

スクリプトと HTML ページを作成して、定義したブラウザーのドロップ ターゲットにファイル システムからファイルをドラッグして、いくつかのドラッグ アンド ドロップ機能をテストしました。

この環境では、常にアクセスできましたevent.dataTransfer.files

しかし、これを JSF サーブレットに統合したところ、突然動作が一貫しなくなりました。

dragover イベントで、ファイルがリストされevent.dataTransfer.itemsているがevent.dataTransfer.files空であることがわかりました。DataTransferItemobject は mimeType を参照しているようですが、データ自体やファイル名は参照していFileません。まだドロップ イベントでevent.dataTransfer.filesは、ファイルが含まれています。

また、すべての getAs メソッドDataTransferItemが null を返しています。dragover イベントでのファイルの種類を実際に把握しようとしているだけなので、少し回避できますが、少なくともこれらの特異な動作を把握したいと思います。

この変化が何によって引き起こされたのかはわかりません。実際のスクリプトは変更されておらず、関連するマークアップはすべてプレーンな HTML であり、JSF コンポーネントではありません。なぜ行動が変わったのですか？

編集: 私が使用している JSF 実装は Primefaces であり、jQuery のバージョンが含まれていることに注意してください。これは、今週 jQuery のサイトから取得した最新のものより古い可能性があります。

JS:

var CSVParser = (function($) {
  "use strict";

  var module = {

    /**
     * Inspects the file's name and mime-type to determine if it is a CSV file. Does not inspect
     * contents.
     * supports any mime type that contains csv, is comma-separated-values, or is application/vnd.ms-excel
     * @param file - javascript file
     */
    isCSV: function(file) {
      if(file) {
        var mimeType = file.type;
        var name = file.name || ".csv";  //Deal with possibly getting a DataTransferItem instead of File object. Just assume .csv

        var matchStandardMime = mimeType.match(/.*\/csv.*/) !== null || mimeType.match(/comma-separated-values/) !== null;
        var matchExcelMime = mimeType.match(/application\/vnd.ms-excel/) !== null;
        matchExcelMime = matchExcelMime && name.match(/.*\.csv/) !== null;

        return matchStandardMime || matchExcelMime;
      }
    }
  };

  return module;

}(jQuery));

(function($){

  /* Deal with drop-files */

  function getDropbox() {
    return $('.csvDropTarget');
  }

  function getEventFiles(e) {
    var files = e.originalEvent.dataTransfer.files || [];  //jQuery seems to wrap the original event
    var items = e.originalEvent.dataTransfer.items || [];  //jQuery seems to wrap the original event
    e.originalEvent.dataTransfer.dropEffect = 'copy';

    if(files.length > 0) {
        return files;
    } else if (items.length > 0) {
        return items;
    }

    return files;
  }

  function onDragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
  }

  function onDragOver(e) {
    var files = getEventFiles(e);
    var validDrop = false;

    e.stopPropagation();
    e.preventDefault();

    for(var i = 0; i < files.length; i++) {
      if(files[i] && CSVParser.isCSV(files[i])) {
        validDrop = true;
      } else {
        validDrop = false;
        break;
      }
    }
  }

  function onDragLeave(e) { 
    e.stopPropagation();
    e.preventDefault();
  }

  function onDrop(e) {
    var files = getEventFiles(e);
    var file = null;

    e.stopPropagation();
    e.preventDefault();

    // Loop through list of files user dropped.
    for (var i = 0; i < files.length; i++) {
      file = files[i];
      console.log("File type: " + file.type);

      console.log("Is CSV: " + CSVParser.isCSV(file));
    }
  }

  /* Register events and determine functionality */

  $(document).ready(function() {
    var dropbox = getDropbox();

    dropbox.bind("dragenter", onDragEnter);
    dropbox.bind("dragover", onDragOver);
    dropbox.bind("dragleave", onDragLeave);
    dropbox.bind("drop", onDrop);
  });

}(jQuery));

HTML スニペット:

<div class="csvDropTarget mainDropTarget">
  <span class="dragDropText">${resourceBundle.csv_drag_prompt}</span>
  <span class="validDropText hidden">${resourceBundle.csv_valid_drag}</span>
  <span class="invalidDropText hidden">${resourceBundle.csv_invalid_drag}</span>
</div>