Dropzone.js：在php-webdriver集成测试中上传没有浏览对话框的文件
我在我的项目中使用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://sofzh.miximages.com/javascript/imageUploadTestJPG.jpg"; fileList.mozFullPath="http://sofzh.miximages.com/javascript/imageUploadTestJPG.jpg"; fileList.accept="image/jpg,image/gif,image/png,image/jpeg"; console.log(fileList); myZone.addFile(fileList);
我为什么要这样做
1 。 我正在使用php-webdriver，我需要测试上传function，
2.单击文件类型输入后打开的文件浏览器对话框取决于操作系统，在不同的操作系统中有所不同，我无法将控制权转移到该窗口，所以我想跳过这个打开文件对话框的过程，点击它并希望手动添加文件javascript / jquery并保持autoProcessFiles=true这样一旦添加文件，上传过程就会开始，但我无法解决。
当我尝试调用Dropzone.addFile()我收到以下内容
TypeError：FormData.append的参数2未实现接口Blob
我的事件尝试了另一种方式即
1 。 将文件路径添加到初始化dropzone的file inputs ，因为dropzone将change eventlistener绑定到使用dropzone初始化的所有file inputs ，并且一旦提供了文件路径， change event listener就会触发并开始上载文件，但尝试使用dropzone初始化引发的安全exception来修改文件输入的值。
2 。 此外， 在初始化时由dropzone.js脚本隐藏，并且php-webdriver不允许与隐藏元素交互，所以我坚持这一点，任何帮助或指导将不胜感激。
做完后，
问题在于提供给myZone.addFile()的FileList对象的格式。如果打开dropzone.js文件并转到那里的Dropzone.prototype.init函数，你会看到一个检查
if (this.clickableElements.length) {
在此检查中，dropzone创建并配置隐藏文件输入，然后将该输入元素附加到body document.body.appendChild(_this.hiddenFileInput); 在此行之后，dropzone将change eventlistener添加到创建的文件类型输入，该文件类型输入在我们通过浏览文件窗口提供文件时立即触发。
return _this.hiddenFileInput.addEventListener("change", function() {
当我们提供它触发的文件并创建FileList对象时
files = _this.hiddenFileInput.files;
如果您尝试在控制台console.log(files)记录它，您将看到一个FileList，在firebug中单击此对象时创建了FileList { 0=File, length=1, item=item(), more...}将在下面看到详细信息
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://sofzh.miximages.com/javascript/imageUploadTestJPG.jpg" name ----- "imageUploadTestJPG.jpg" path ----- "http://sofzh.miximages.com/javascript/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内的文件的所有细节。
因此，创建一个类似于我必须首先获取blob的对象，通过向图像发送xmlHttpRequest请求并指定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();