Dropzone.js :在 php-webdriver 集成测试中上传文件而不带浏览对话框

Dropzone.js : Upload file without Browse dialog in php-webdriver integration tests

本文关键字：文件 对话框 浏览 js php-webdriver 集成测试 Dropzone      更新时间：2023-09-26

我在我的项目中使用dropzone.js，我想做的是在不打开文件浏览器对话框的情况下手动将文件添加到队列中，拖放区已经在页面上使用类.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()时，我收到以下内容

类型错误： FormData.append 的参数 2 未实现接口 斑点

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

1. 将文件路径添加到初始化放置区的文件输入

，因为 dropzone 将change eventlistener与使用放置区初始化的所有file inputs绑定，并且一旦提供文件的路径，change event listener就会触发并开始上传文件，但尝试修改文件输入的值，dropzone 初始化引发安全异常。

2.此外，<input type=file>在初始化时被dropzone.js脚本隐藏，并且php-webdriver不允许与隐藏元素交互，所以我被困住了，任何帮助或指导将不胜感激。

完成，

问题出在提供给myZone.addFile()的文件列表对象的格式上。如果您打开dropzone.js文件并转到其中Dropzone.prototype.init函数，您将看到一个检查

if (this.clickableElements.length) {

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

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

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

files = _this.hiddenFileInput.files;

如果您尝试在控制台console.log(files)中登录它，您将看到已创建的 FileList 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()}

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

_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();
相关文章：