模拟文件丢弃并上传到dropzone.js

时间:2015-03-16 04:56:13

标签: javascript file-upload dropzone.js

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

问题:

我可以使用javascript来模拟将可上传的文件放到dropzone上吗?

我认为(但我不确定)这可能包含以下内容:

  1. 在javascript中创建类似文件的对象,然后
  2. myDropzone上触发放置事件。
  3. 步骤#2很简单,但步骤#1涉及创建一个类似文件的对象(包含真正的数据流?),一旦删除它就可以实际上传。

    我尝试创建虚拟文件,例如this,然后使用myDropzone.addFile(...),但由于没有数据有效负载,因此无法生成可上载的文件。

    谢谢!

1 个答案:

答案 0 :(得分:5)

我能做的是从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/