Question

我写了一个脚本和html页面来测试一些拖放功能，文件系统中的文件被拖入我定义的浏览器放置目标。

在这种环境中，我始终能够访问event.dataTransfer.files

但是，我已经将它集成到JSF servlet中，突然之间的行为并不一致。

我现在看到，在dragover事件中，该文件列在event.dataTransfer.items下，但event.dataTransfer.files为空。 DataTransferItem对象似乎引用了mimeType而不是数据本身，也没有像File那样引用文件名。然而，在放置事件中，event.dataTransfer.files包含文件。

此外，DataTransferItem上的所有getAs方法都返回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>

HTML5拖放式DataTransfer：有时在文件中拖动数据

0 个答案: