在 dropzone.js 中模拟文件拖放和上传答案

【问题标题】：Simulated file drop and upload in dropzone.js在 dropzone.js 中模拟文件拖放和上传
【发布时间】：2015-03-16 04:56:12
【问题描述】：

我正在为包含 dropzone.js 元素的网页编写测试工具，我们称之为 myDropzone，由 $('#my-dropzone') 元素表示。

问题：

我可以使用 javascript 模拟将可上传文件拖放到 dropzone 中吗？

我认为（但我不确定）这可能需要以下内容：

在 javascript 中创建一个类似文件的对象，然后
在myDropzone 上触发放置事件。

第 2 步很简单，但第 1 步涉及创建一个类似文件的对象（包含真实数据流？），一旦删除它就可以实际上传。

我尝试创建虚拟文件，例如 this，然后使用 myDropzone.addFile(...)，但这不会导致文件可上传，因为没有数据负载。

谢谢！

【问题讨论】：

标签： javascript file-upload dropzone.js

【解决方案1】：

我能够做的是从 base64 编码文件（在本例中为图像）创建一个 Blob 文件并将其传递给 addFile()，因此它本质上是模拟删除文件。

dropZone.addFile(base64toBlob(base64FileData, 'image/png'));

base64toBlob 在哪里：

function base64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

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

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

完整演示http://jsfiddle.net/P2dTF/52/

【讨论】：