Dropzone js – 从同一页面拖动n Drop文件

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

我的问题是 – 如何将n drop图像从同一页面拖放到dropzone中。 让我们说我有一个dropzone div，我有另一个有多个图像的div。 我想将这些图像拖放到dropzone中。

Answer 1

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

这是我解决问题的方法。 数据转换function在互联网上找到。 这里有一个关于真实情况的一点解释：

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