Dropzone js - 从同一页面拖放文件 [英] Dropzone js - Drag n Drop file from same page

问题描述

我正在使用 Dropzone 插件来实现多个文件的拖放功能.当我从我的笔记本电脑/台式机上传图片时，拖放工作正常.

I am using Dropzone plugin for multiple files drag n drop functionality. Drag n drop works fine when I am uploading pictures from my laptop / desktop.

我的问题是 - 如何将 n 个放置图像从同一页面拖放到 dropzone 中.假设我有一个 dropzone div，并且我有另一个 div 有多个图像.我想将这些图像拖放到 dropzone 中.

My question is - how can I drag n drop images into dropzone from same page. Lets say I have a dropzone div and I am having another div having multiple images. I want to drag n drop those images into dropzone.

推荐答案

this.on("drop", function(event) {
  var imageUrl = event.dataTransfer.getData('URL');
  var fileName = imageUrl.split('/').pop();

  // set the effectAllowed for the drag item
  event.dataTransfer.effectAllowed = 'copy';

  function getDataUri(url, callback) {
    var image = new Image();

    image.onload = function() {
      var canvas = document.createElement('canvas');
      canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
      canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

      canvas.getContext('2d').drawImage(this, 0, 0);

      // Get raw image data
      // callback(canvas.toDataURL('image/png').replace(/^data:image/(png|jpg);base64,/, ''));

      // ... or get as Data URI
      callback(canvas.toDataURL('image/jpeg'));
    };

    image.setAttribute('crossOrigin', 'anonymous');
    image.src = url;
  }

  function dataURItoBlob(dataURI) {
    var byteString,
        mimestring

    if (dataURI.split(',')[0].indexOf('base64') !== -1) {
      byteString = atob(dataURI.split(',')[1])
    } else {
      byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) {
      content[i] = byteString.charCodeAt(i)
    }

    return new Blob([new Uint8Array(content)], {
      type: mimestring
    });
  }

  getDataUri(imageUrl, function(dataUri) {
    var blob = dataURItoBlob(dataUri);
    blob.name = fileName;
    myDropzone.addFile(blob);
  });
});

http://codepen.io/BartSitek/pen/ZeMGjV

这是我解决问题的方法.数据转换功能是在互联网上找到的.下面是对实际情况的一点解释:

Here’s my solution to the problem. Data conversion functions were found on the internet. 
And here’s a little explanation of what’s really happening:

• 在drop"事件期间，抓取您正在拖动的图片的 URL
• 将该 URL 转换为数据 URI 格式
• 将数据 URI 转换为 Blob
• 将 Blob 添加到 Dropzone 表单

这篇关于Dropzone js - 从同一页面拖放文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！