Dropzone.js：在php-webdriver集成测试中上传文件时不带“浏览”对话框

Question

我正在dropzone.js我的项目中使用，我想做的是手动添加文件到队列中，而无需打开文件浏览器对话框，dropzone已在页面上的类.imageDropzone的元素上初始化，并且我试图运行以下脚本来添加文件，

Dropzone.autoDiscover=false;
var myZone=Dropzone.forElement('.imageDropzone');
var fileList=$("input[accept='image/jpg,image/gif,image/png,image/jpeg']")[0].files;
fileList.name="imageUploadTestJPG.jpg";
fileList.type="image/jpeg";
fileList.size=30170,
fileList.path="http://mysite/img/imageUploadTestJPG.jpg";
fileList.mozFullPath="http://mysite/img/imageUploadTestJPG.jpg";
fileList.accept="image/jpg,image/gif,image/png,image/jpeg";

console.log(fileList);
myZone.addFile(fileList);

我为什么要这样做

1 。我正在使用php-webdriver，需要测试上传功能，

2.
单击文件类型输入后打开的文件浏览器对话框取决于操作系统，在不同的操作系统中有所不同，因此我无法将控制权移至该窗口，因此我想通过单击跳过此打开文件对话框的过程并想手动添加文件javascript
/ jquery并保留，autoProcessFiles=true以便在添加文件后立即开始上传过程，但是我无法解决。

当我尝试致电时，Dropzone.addFile()我收到以下消息

TypeError：FormData.append的参数2未实现接口Blob

我事件尝试了另一种方式，即

1 。将文件路径添加到初始化了dropzone的文件输入中，因为dropzone绑定了一个change eventlistener与所有file inputs使用dropzone初始化的文件的绑定，并且一旦提供了文件路径，change event listener触发器就会开始并开始上传文件，但是尝试修改该值使用dropzone初始化的文件输入引发了安全性异常。

2 。而且，在初始化时脚本<input type=file>将其隐藏起来，dropzone.js并且php-
webdriver不允许与隐藏元素进行交互，因此我坚持使用此方法，将不胜感激任何帮助或指导。

Answer 1

做完了

问题在于提供给.FileFile对象的格式myZone.addFile()。如果打开dropzone.js文件并Dropzone.prototype.init在其中运行，您将看到一个检查

if (this.clickableElements.length) {

在此检查中，dropzone创建并配置了隐藏文件输入，然后将该输入元素附加到主体，document.body.appendChild(_this.hiddenFileInput);并在此行之后dropzone将changeeventlistener
添加到已创建的文件类型输入中，一旦我们通过浏览文件窗口提供文件，该事件就会触发。

return _this.hiddenFileInput.addEventListener("change", function() {

当我们提供文件时，它将触发并创建FileList对象，请参见

files = _this.hiddenFileInput.files;

如果您尝试将其记录在控制台中console.log(files)，则会看到FileList { 0=File, length=1, item=item(), more...}在Firebug中单击该对象时创建的FileList， 您将在下面看到详细信息

0          File { size=21789, type="image/png", name="1-7-2013 6-19-44 PM.png", more...}
length      1
__proto__   FileListPrototype { item=item(), @@iterator=@@iterator()}

现在我创建文件列表对象的方式是结果

_removeLink -----  a.dz-remove javascrip...defined; 
accept      -----  "image/jpg,image/gif,image/png,image/jpeg"   
accepted    -----  true 
mozFullPath -----  "http://mysite/img/imageUploadTestJPG.jpg"   
name        -----  "imageUploadTestJPG.jpg" 
path        -----  "http://mysite/img/imageUploadTestJPG.jpg"   
previewElement --   div.dz-preview  
previewTemplate --- div.dz-preview  
processing    ----- true    
size                30170   
status        ----- "uploading"
type                "image/jpeg"    
upload        -----  Object { progress=0, total=30170, bytesSent=0}
xhr            XMLHttpRequest { readyState=1, timeout=0, withCredentials=false, more...}
length             0
__proto__          FileListPrototype { item=item(), @@iterator=@@iterator()}

请注意0，第一个详细信息上的索引包含文件的详细信息，而第二个索引是我自定义构建的FileList对象的结果，该文件的所有详细信息都位于主文件而不是索引内0。

因此，要创建类似的对象，我必须首先

• 通过将xmlHttpRequest请求发送到图像来获取Blob
• 指定的响应类型 arraybuffer
• 获取blob URL图像数据。
• 将该响应分配给文件对象，然后将其分配给 input.file
• 呼叫Dropzone.addFile()。

该过程的完整说明如下，您可以上传文件而无需打开文件浏览窗口并dropzone.js与selenium

// Simulate a call to  service that can
// return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();

// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "http://localhost/path/to/my/image.jpg", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );

    var parts = [blob, new ArrayBuffer()];

    file = new File(parts, "imageUploadTestFile", {
        lastModified: new Date(0), // optional - default = now
        type: "image/jpeg" 
    });

    $("input[accept=\'image/jpg,image/gif,image/png,image/jpeg\']").files = [file];
    myzone = Dropzone.forElement(".imageDropzone");
    myzone.addFile(file);
};
xhr.send();