模拟丢弃文件事件

Posted 2021-04-20

是否可以仅使用javascript模拟/伪造掉落事件？如何测试此类事件？

以这个dnd上传示例page为例，是否可以使用文件触发“drop”事件而不实际丢弃文件？我们说点击一个按钮？

我已经开始编写一个Sukuli脚本，可以控制鼠标并做到这一点但我正在寻找更好的解决方案。

编辑

@kol答案是摆脱拖放事件的好方法，但我仍然需要从我的电脑中手动选择一个文件。这是我对模拟感兴趣的一点。有没有办法以编程方式创建文件变量？

var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];    

答案

1.删​​除用户选择的图像

我做了一个jsfiddle。这是你提到的html5demos.com page的精简版，但是：

• 我添加了一个<input type="file">标签，可用于从本地计算机中选择图像文件，和
• 我还添加了一个带有<input type="button">处理程序的onclick标记，它通过直接调用DND目标ondrop标记的div事件处理程序来模拟“drop file”事件。

ondrop处理程序如下所示：

holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault();
    readfiles(e.dataTransfer.files);
}

也就是说，我们必须将参数传递给ondrop，其中

• 有一个dataTransfer字段与files数组子字段，其中包含选定的File，和
• 有一个preventDefault方法（一个没有身体的功能会做）。

所以“Simulate drop”按钮的onclick处理程序如下：

function simulateDrop() {
    var fileInput = document.getElementById('fileInput'),
        file = fileInput.files[0];        
    holder.ondrop({ 
        dataTransfer: { files: [ file ] }, 
        preventDefault: function () {} 
    });
}

测试

1. 选择图像文件（png，jpeg或gif）
2. 单击“模拟下拉”按钮

结果

2.在没有用户交互的情况下删除自动生成的测试文件（GOOGLE CHROME ONLY!!!）

我做了另一个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，并将此内容类型添加到acceptedTy