[英]Dropzone.js : Upload file without Browse dialog in php-webdriver integration tests
我在我的项目中使用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()
我收到以下信息
类型错误:FormData.append 的参数 2 没有实现接口 Blob
我事件尝试了另一种方式,即
1 . 文件路径添加到其上悬浮窗被初始化,因为悬浮窗结合的文件输入change eventlistener
所有的file inputs
被初始化悬浮窗,并尽快路径文件中提供的change event listener
触发并开始上传文件,但是尝试使用 dropzone 初始化引发的安全异常来修改文件输入的值。
2 . 此外, <input type=file>
在初始化时被dropzone.js
脚本隐藏,并且 php-webdriver 不允许与隐藏元素交互,所以我坚持这一点,任何帮助或指导将不胜感激。
完毕,
问题在于提供给myZone.addFile()
的 FileList 对象的格式。如果您打开dropzone.js
文件并转到Dropzone.prototype.init
函数,您将看到一个检查
if (this.clickableElements.length) {
在此检查 dropzone 内创建和配置隐藏文件输入,然后将该输入元素附加到正文document.body.appendChild(_this.hiddenFileInput);
在此行之后 dropzone 将change
侦听器添加到创建的文件类型输入中,一旦我们通过浏览文件窗口提供文件,该输入就会触发。
return _this.hiddenFileInput.addEventListener("change", function() {
当我们提供文件时,它会触发并创建FileList
对象,请参阅
files = _this.hiddenFileInput.files;
如果您尝试在控制台console.log(files)
记录它,您将看到一个 FileList,该FileList { 0=File, length=1, item=item(), more...}
创建了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://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
请求获取 blobarraybuffer
的响应类型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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.