Javascript Dropzone.js：在php webdriver集成测试中不使用浏览对话框上载文件

我在我的项目中使用了

dropzone.js

，我想做的是在不打开文件浏览器对话框的情况下手动将文件添加到队列中，dropzone已经在页面上的class.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（）

时，我收到以下消息

_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()}

TypeError:FormData.append的参数2未实现接口 斑点

我尝试了另一种方法，即

1。将文件路径添加到初始化dropzone的文件输入中，因为dropzone将

更改事件侦听器

与使用dropzone初始化的所有

文件输入

绑定，一旦提供了文件路径，

更改事件侦听器

将触发并开始上载文件，但尝试使用dropzone initialized修改文件输入的值会引发安全异常

2。此外，

在初始化时被

dropzone.js

脚本隐藏，并且php webdriver不允许与隐藏元素交互，因此我无法解决此问题，任何帮助或指导都将不胜感激。

完成

问题在于提供给

myZone.addFile（）

的文件列表对象的格式。如果打开

dropzone.js

文件并转到

dropzone.prototype.init

函数，您将看到一个复选框

if（this.clickableElements.length）{

在这个check-dropzone中创建并配置隐藏的文件输入，然后将该输入元素附加到body

document.body.appendChild（_this.hiddenFileInput）

在这一行之后，dropzone将

change

eventlistener添加到创建的文件类型输入中，一旦我们通过“浏览文件”窗口提供文件，就会立即触发该输入

return\u this.hiddenFileInput.addEventListener（“change”，function（）{

当我们提供文件时，它会激发并创建

FileList

对象，请参见

files=\u this.hiddenFileInput.files；

如果您尝试将其登录到console

console.log（files）

中，您将看到创建的文件列表

FileList{0=File，length=1，item=item（），more…}

在firebug中单击此对象，您将看到下面的详细信息

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()}

现在，我创建filelist对象的方式如下所示

_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

• 将该响应分配给file对象，并将其分配给

  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();

---

很好的回答，它帮助了我！很高兴听到它帮助你摆脱了罗卡斯