在dropzone.js中启用复制和粘贴文件

Enable copy and paste files in dropzone.js

本文关键字：文件 复制 启用 dropzone js      更新时间：2023-09-26

我正在使用dropzone.js。我想在其中实现"复制和粘贴">功能。

我尝试的是：

Inside dropzone.js:

paste: function(e) {
    Dropzone.prototype.emit("paste");
}
Dropzone.prototype.paste = function(e) {
    var items, _ref;
    if ((e != null ? (_ref = e.clipboardData) != null ? _ref.items : void 0 : void 0) == null) {
        return;
    }
    this.emit("paste", e);
    items = e.clipboardData.items;
    if (items.length) {
        return this._addFilesFromItems(items);
    }
};

Page level script:

<script>
    var dropZone = Dropzone.forElement('#dropzone1');
    dropZone.paste();
</script>

以上不是调用paste:function(e){..}

如何纠正？

如果你不想使用其他JS库，你可以通过从粘贴事件中以文件的形式检索数据，很容易地将dropzone与粘贴事件集成：

// create dropzone however you wish
const myDropzone = new Dropzone("div#element", { url: "/path/to/upload"});
// add paste event listener to the page
document.onpaste = function(event){
  const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  items.forEach((item) => {
    if (item.kind === 'file') {
      // adds the file to your dropzone instance
      myDropzone.addFile(item.getAsFile())
    }
  })
}

这对我很有用。它使用了FileReaderJS包装器。由于我不是用程序创建dropzone的，所以我不得不在运行时使用init((方法存储它。

请参阅此处获取FileReaderJS部分。

var myDropzone;
function checkUploadFile(filename) {
    //do some input checking here, if you want
    return true;
}
Dropzone.options.FileDropUploadZone = {
  paramName: "myDiv",
  maxFilesize: 3, // MB
  uploadMultiple: true,
  addRemoveLinks: true,
  acceptedFiles: 'image/*',
  maxFiles: 10,
  accept: function(file, done) {
      if (!checkUploadFile(file.name)) {
                done('Invalid file');
                myDropzone.removeFile(file);
      }
      else { done(); }
  },
  init: function() {
      myDropzone = this;
  }
};
$(document).ready(function () {
        FileReaderJS.setupClipboard(document.body, {
            accept: {
                'image/*': 'DataURL'
            },
            on: {
                load: function(e, file) {
                myDropzone.addFile(file);
                }
            }
        });
});

var myDropzone = new Dropzone(".dropzone", { });
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      // adds the file to your dropzone instance
      myDropzone.addFile(item.getAsFile())
    }
  }
}

只需添加此代码。不要声明URL，因为URL也在PHP或编码文件中声明，请将此代码粘贴到视图文件(HTML、PHP等(中。

相关文章：