支持从文件系统和另一个浏览器窗口中进行拖放，将结果作为文件附件发布，而不管其来源如何，类似于下面的情况（仅支持文件系统拖放） ，通过dropzone.js）我非常想保留当前的API。
我当前的攻击方法是获取所拖动图像的URL，HTTP获取图像，并使用现有的Dropzone API处理其余的过程（创建缩略图，上传文件，处理上传等）。也就是说，我还没有完全锁定到Dropzone。
我最初实现了image drag-and-drop from the the local filesystem using DropZone。这是当前实现的精简版：
Dropzone.options.pictureDrop = {
paramName: 'picture[image]',
maxFilesize: 9.6, // MB
}<!DOCTYPE html>
<meta charset="utf-8">
<title>Dropzone simple example</title>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<!-- Change /upload-target to your upload address -->
<form action="/upload-target" class="dropzone" id="pictureDrop"></form>
我有一个新要求，将图像从一个网站拖到另一个网站。似乎并没有得到广泛的支持，当然也没有dropzone支持。但是，有问题的用户对于使用它的需求还是很坚定的。
如果有图像，我可以这样修改DropZone以获得传入图像的URL：
// getAString and it's DataTransferItem parent are defined here:
// https://www.w3.org/TR/html51/editing.html#the-datatransferitem-interface
//
// The getAsString interface is DUMB. It's async
// and accepts a callback but does not return a promise, nor
// does it have a failure callback. So with the help of #javascript on
// freenode, I created these wrappers:
function getMyString(datum)
{
let promise = new Promise(function(resolve, reject)
{
// if readonly mode, we should reject() per the spec. But I
// couldn't figure out how to determine the 'mode'. May
// need the parent.
if(datum.kind !== 'string')
reject();
else
{
// We can't seem to test for 'readonly mode' and don't know about other
// failures, so we still need a timeout to reject.
let rejection = reject;
// TODO: prevent situation where failsafe fires and then success fires.
let failsafe = setTimeout(function(){console.log('timeout reject from getMyString'); rejection()}, 1000);
let success = function(url) {clearTimeout(failsafe); resolve(url); }
datum.getAsString(success);
}
});
return promise
}
function getImageURL(items) {
const urlList = Array.from(items).find(i => (i.kind == 'string') && (i.type == 'text/uri-list'))
if (urlList)
{
return getMyString(urlList);
} else {
return Promise.resolve();
}
}
function receiveImage(url)
{
target = document.getElementById('pictureDrop');
let img = document.createElement('img');
img['src'] = url;
target.appendChild(img);
}
function noteFailure()
{
console.log('Nope');
}
Dropzone.options.pictureDrop = {
paramName: 'picture[image]',
maxFilesize: 9.6, // MB
init: function()
{
this.on('drop', function(ev)
{
let data = ev.dataTransfer.items;
getImageURL(data).then(receiveImage, noteFailure);
})
}
}<!DOCTYPE html>
<meta charset="utf-8">
<title>Dropzone simple example</title>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<p>Open this URL in another window: <pre>https://i.pinimg.com/originals/a9/fd/37/a9fd378c3f8963fbd46fc36431b0123e.jpg</pre> and drag that image here.</p>
<form action="/upload-target" class="dropzone" id="pictureDrop"></form>
现在我有了图像URL。我想以某种方式将其与DropZone集成（DropZone将随后绘制缩略图和控件，并且已经设置为upload the file。）我想我想调用addFile(file)，但不确定。 ，部分原因是我看不到hiddenFileInput mentioned extensively in the related code。
这就是问题。如何获取此URL，将其转换为可接受的“文件”，并让Dropzone处理它？</ p>