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

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

做完了

问题在于提供给.FileFile对象的格式

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