模拟放置文件事件
[英]Simulate drop file event
问题描述
是否可以仅使用javascript模拟/伪造drop事件？ 如何测试此类事件？
以这个dnd上载示例页面为例，是否可以触发文件的“ drop”事件而无需实际将文件拖放到那里？ 假设点击一个按钮？
我已经开始写一个可以控制鼠标并完成技巧的Sukuli脚本，但我一直在寻找更好的解决方案。
编辑
@kol答案是摆脱拖放事件的好方法，但我仍然必须从计算机中手动选择一个文件。 这是我感兴趣的模拟部分。 有没有办法以编程方式创建文件变量？
var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];
2 个解决方案
解决方案1
19 已采纳 2014-04-01 22:27:45
1.删除用户选择的图像
我做了一个jsfiddle 。 这是您所引用的html5demos.com页面的精简版本，但是：
- 我添加了
<input type="file">标记，该标记可用于从本地计算机选择图像文件，并且 - 我还添加了带有
onclick处理程序的<input type="button">标记，该标记通过直接调用 DND-targetdiv标记的ondrop事件处理程序来模拟“放置文件”事件。
上ondrop处理程序如下所示：
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
}
也就是说，我们必须将一个参数传递给ondrop ，
- 有一个
dataTransfer字段和一个files数组子字段，其中包含选定的File，以及 - 有一个
preventDefault方法（没有主体的函数可以执行）。
因此，“模拟放置”按钮的onclick处理程序如下：
function simulateDrop() {
var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];
holder.ondrop({
dataTransfer: { files: [ file ] },
preventDefault: function () {}
});
}
测试
- 选择一个图像文件（png，jpeg或gif）
- 点击“模拟下落”按钮
结果
2.无需用户干预即可删除自动生成的测试文件（ 仅适用于GOOGLE CHROME ！！！ ）
我做了另一个jsfiddle 。 加载页面后，将调用一个函数，该函数：
- 在临时文件系统中创建一个文本文件，然后
- 将此文本文件加载并拖放到目标
<div>； 然后 - 在临时文件系统中创建一个映像文件，然后
- 将此图像文件加载并拖放到目标
<div>。
此drop-simulator函数调用的代码如下：
(function () {
var fileErrorHandler = function (e) {
var msg = "";
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = "QUOTA_EXCEEDED_ERR";
break;
case FileError.NOT_FOUND_ERR:
msg = "NOT_FOUND_ERR";
break;
case FileError.SECURITY_ERR:
msg = "SECURITY_ERR";
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = "INVALID_MODIFICATION_ERR";
break;
case FileError.INVALID_STATE_ERR:
msg = "INVALID_STATE_ERR";
break;
default:
msg = "Unknown Error";
break;
};
console.log("Error: " + msg);
},
requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem,
dropFile = function (file) {
holder.ondrop({
dataTransfer: { files: [ file ] },
preventDefault: function () {}
});
};
if (!requestFileSystem) {
console.log("FileSystem API is not supported");
return;
}
requestFileSystem(
window.TEMPORARY,
1024 * 1024,
function (fileSystem) {
var textFile = {
name: "test.txt",
content: "hello, world",
contentType: "text/plain"
},
imageFile = {
name: "test.png",
content: "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
contentType: "image/png",
contentBytes: function () {
var byteCharacters = atob(this.content),
byteArrays = [], offset, sliceSize = 512, slice, byteNumbers, i, byteArray;
for (offset = 0; offset < byteCharacters.length; offset += sliceSize) {
slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = new Array(slice.length);
for (i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return byteArrays;
}
};
// Create and drop text file
fileSystem.root.getFile(
textFile.name,
{ create: true },
function (fileEntry) {
fileEntry.createWriter(
function (fileWriter) {
fileWriter.onwriteend = function(e) {
console.log("Write completed (" + textFile.name + ")");
fileSystem.root.getFile(
textFile.name,
{},
function (fileEntry) {
fileEntry.file(
function (file) {
dropFile(file);
},
fileErrorHandler
);
},
fileErrorHandler
);
};
fileWriter.onerror = function(e) {
console.log("Write failed (" + textFile.name + "): " + e.toString());
};
fileWriter.write(new Blob([ textFile.content ], { type: textFile.contentType }));
},
fileErrorHandler
);
},
fileErrorHandler
);
// Create and drop image file
fileSystem.root.getFile(
imageFile.name,
{ create: true },
function (fileEntry) {
fileEntry.createWriter(
function (fileWriter) {
fileWriter.onwriteend = function(e) {
console.log("Write completed (" + imageFile.name + ")");
fileSystem.root.getFile(
imageFile.name,
{},
function (fileEntry) {
fileEntry.file(
function (file) {
dropFile(file);
},
fileErrorHandler
);
},
fileErrorHandler
);
};
fileWriter.onerror = function(e) {
console.log("Write failed (" + imageFile.name + "): " + e.toString());
};
fileWriter.write(new Blob(imageFile.contentBytes(), { type: imageFile.contentType }));
},
fileErrorHandler
);
},
fileErrorHandler
);
},
fileErrorHandler
);
})();
自动生成的文本文件的内容以字符串形式给出，图像文件的内容以base64编码字符串形式给出。 这些很容易更改。 例如，测试文本文件不仅可以包含纯文本，还可以包含HTML。 在这种情况下，不要忘记将textFile.contentType字段从text/plain更改为text/html ，并将此内容类型添加到acceptedTypes数组和previewfile函数中。 测试映像也可以轻松更改，您只需要一个image-to-base64转换器 。
我必须扩展放置处理程序代码以处理图像之外的文本文件：
acceptedTypes = {
'text/plain': true, // <-- I added this
'image/png': true,
'image/jpeg': true,
'image/gif': true
},
...
function previewfile(file) {
if (tests.filereader === true && acceptedTypes[file.type] === true) {
var reader = new FileReader();
if (file.type === 'text/plain') { // <-- I added this branch
reader.onload = function (event) {
var p = document.createElement("p");
p.innerText = event.target.result;
holder.appendChild(p);
}
reader.readAsText(file);
} else {
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.width = 250; // a fake resize
holder.appendChild(image);
};
reader.readAsDataURL(file);
}
} else {
holder.innerHTML += '<p>Uploaded ' + file.name + ', ' + file.size + ' B, ' + file.type;
console.log(file);
}
}
请注意，在加载jsfiddle之后 ，可以列出自动生成的文件以进行调试：
结果
屏幕快照显示模拟的放置在自动生成的图像之前插入了自动生成的文本文件的内容。 DND目标<div>的HTML代码如下所示：
<div id="holder" class="">
<p>hello, world</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggkFBTzlUWEwwWTRPSHdBQUFBQkpSVTVFcmtKZ2dnPT0=" width="250">
</div>
解决方案2
4 2014-04-02 20:06:21
@kol答案是摆脱拖放事件的好方法，但我仍然必须从计算机中手动选择一个文件。 这是我感兴趣的模拟部分。 有没有办法以编程方式创建文件变量？ -caiocpricci2
尝试这个
function createFile() {
var create = ["<!doctype html><div>file</div>"];
var blob = new Blob([create], {"type" : "text/html"});
return ( blob.size > 0 ? blob : "file creation error" )
};
createFile()
模拟拖放文件以在Protractor中上传
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.