- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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()
时我收到以下内容
TypeError: Argument 2 of FormData.append does not implement interface Blob
我尝试了另一种方式,即
1。将文件路径添加到初始化 dropzone 的文件输入,因为 dropzone 绑定(bind)了 change eventlistener
所有file inputs
这是用 dropzone 初始化的,一旦提供了文件路径 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
事件监听器为创建的文件类型输入,只要我们通过浏览文件窗口提供文件就会触发。
返回 _this.hiddenFileInput.addEventListener("改变", function() {
当我们提供文件时,它会触发并创建 FileList
对象,请参阅
files = _this.hiddenFileInput.files;
如果您尝试在控制台 console.log(files)
中记录它,您将看到一个已创建的 FileListFileList { 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
请求获取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();
关于javascript - Dropzone.js : Upload file without Browse dialog in php-webdriver integration tests,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27785721/
我需要让我的用户将文件路径发送到网络服务器。为此,我尝试使用输入文件类型,以便用户可以选择文件。请注意,我不想上传文件。我只需要一些文件的位置。因此,用户应该能够使用浏览选项来做到这一点。我知道由于浏
这个问题在这里已经有了答案: How to change the button text of ? (23 个回答) 关闭 8 年前。 我不想完全重新设计文件上传按钮的样式,我只想更改按钮的内容。有
我使用 Bootstrap ,但在类型文件的表单字段中没有出现“浏览”文本,您知道为什么吗?它只显示像输入文本字段一样的输入,没有任何“浏览”按钮。 HTML: Select an I
我在 Bootstrap 中使用 Vich Uploader bundle for SF 4.0。我想设置一个占位符并重命名“浏览”按钮。 我已经尝试过: 使用“placehoder”属性 (Form
在 Sitecore 7 的图像字段中浏览图像时,是否可以默认使用“浏览”选项卡而不是新的“搜索”选项卡? 新的搜索功能非常适合高级用户,但是,我的内容作者发现它令人困惑,尤其是在结果中显示多种语言的
我正在运行一个基于ubuntu:14.04的容器,我需要能够在其中使用avahi-browse。然而: (.env)root@8faa2c44e53e:/opt/cluster-manager# av
我正在处理一个查询,并且从 Microsoft 找到了有关 select 语句上的 TSQL“FOR BROWSE”选项的最少文档。 我已经看到 FOR BROWSE 被记录为游标选项,但我还没有找到
我为客户创建了一个站点,要求用户单击图像,然后会显示一个输入类型的文件字段,其中包含通常的浏览按钮和提交按钮。然后用户在他们的硬盘上找到一个文件并点击上传。 但我的客户不喜欢这样,她希望图像本身具有浏
我想将 apk 文件放入 Kindle Fire 存储(通过 USB 数据线)并在设备上安装它。关于如何做有什么建议吗? 最佳答案 基本上你必须侧载。 查看此 http://www.tested.co
我关于指针游标的最后一个问题。 在 Html 中你有一个输入文件标签。这显示了一个文本框和一个浏览按钮。我想知道的是如何在悬停在“浏览”按钮上时显示光标指针? 代码如下: var $videofile
我需要根据 JSP 中的区域设置更改“浏览”按钮文本。 (例如俄语、葡萄牙语)用于基于 Spring 的元素。 以下是浏览按钮的当前实现 据我所知,我们无法更改输入类型文件 的文本。这是浏览器中浏览
我有一个使用 Bootstrap 的 asp.net 网站,在一个页面上我有一个文件上传字段。现在我知道这已经被问过很多次了,但我似乎找不到 asp.net 的解决方案。 理想情况下,我所追求的是设置
我一直在 Google 上寻找一种简单、干净的方法来更改 HTML 的浏览按钮的样式 控件,但到目前为止我发现的所有解决方案都涉及隐藏控件、图像的绝对定位、jQuery 插件等。有没有一种方法可以使用
如何在 VS2012 中浏览 TFS 存储库? 我已经浏览了所有团队资源管理器窗口选项,但找不到打开窗口以浏览 TFS 存储库中所有文件夹/项目的选项。 最佳答案 (1) 要浏览版本控制文件夹,请选择
我在我的几台服务器上安装了这个 EFS 挂载。现在大约是 4.3TB。 不幸的是,目录结构没有正确完成,这就是为什么使用通常的 OS 文件导航命令加载某些大文件夹需要很长时间的原因。 这让我想到我一定
有没有办法在 Vim 中搜索最近使用的文件列表?该列表可以使用 browse old 但是 /不起作用。我知道一些插件(例如 MRU),但不想使用插件。 最佳答案 这是一个简短的 scriptlet,
我正在开发一个应用程序,如果用户点击一个链接,我希望它在他们的默认浏览器中打开。从我读过的内容来看,这在理论上应该可行,但是,当在 Linux(特别是 Linux Mint 17.1)上运行时,它会挂
我的网站有不同的行为,具体取决于用户详细信息(例如位置...),我手动测试的方式是使用代理浏览网站,此测试是否可以使用 Browserstack 进行? 换句话说,我可以指定浏览器堆栈在浏览我的网站时
这是我的表单,带有两个单选按钮和一个图像上传字段。如果未选择第二个单选按钮(值为“local”),我想保持“浏览”按钮处于禁用状态。 有人可以帮忙吗? 最佳答案 [See it in ac
我想向用户展示程序将被安装到哪个目录。但是我不想让他更改那个目录。所以我考虑禁用“浏览”按钮并将可以键入路径的字段变灰(禁止任何人在那里键入)。 我已阅读 this问题,这是关于防止用户选择错误的目录
我是一名优秀的程序员,十分优秀!