Dropzone js - 从同一页面拖放文件
Dropzone js - Drag n Drop file from same page
我正在使用 Dropzone 插件来实现多个文件的拖放功能。当我从我的笔记本电脑/台式机上传图片时,拖放工作正常。
我的问题是 - 如何从同一页面将 n 个拖放图像拖入拖放区。假设我有一个 dropzone div 并且我有另一个 div 有多个图像。我想将这些图像拖放到 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
这是我对问题的解决方案。数据转换函数是在网上找的。下面是对实际情况的一些解释:
- 在“拖放”事件期间,抓取您正在拖动的图像的 URL
- 将 URL 转换为数据 URI 格式
- 将数据 URI 转换为 Blob
- 将 Blob 添加到 Dropzone 表单
我正在使用 Dropzone 插件来实现多个文件的拖放功能。当我从我的笔记本电脑/台式机上传图片时,拖放工作正常。
我的问题是 - 如何从同一页面将 n 个拖放图像拖入拖放区。假设我有一个 dropzone div 并且我有另一个 div 有多个图像。我想将这些图像拖放到 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
这是我对问题的解决方案。数据转换函数是在网上找的。下面是对实际情况的一些解释:
- 在“拖放”事件期间,抓取您正在拖动的图像的 URL
- 将 URL 转换为数据 URI 格式
- 将数据 URI 转换为 Blob
- 将 Blob 添加到 Dropzone 表单