javascript - 模拟拖放文件事件

Question

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

以这个 dnd 上传样本为例 page , 是否可以用文件触发“drop”事件而不实际将文件放在那里？比方说点击一个按钮？

我已经开始写 Sukuli可以控制鼠标并执行此操作的脚本，但我一直在寻找更好的解决方案。

编辑

@kol answer 是摆脱拖放事件的好方法，但我仍然必须从我的计算机中手动选择一个文件。这是我有兴趣模拟的一点。有没有办法以编程方式创建文件变量？

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

Answer 1

<强>1。删除用户选择的图像

我做了一个 jsfiddle .它是 html5demos.com page 的精简版你提到过，但是:

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

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

测试

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 , 并将此内容类型添加到 acceptedTypes数组和 previewfile功能。测试图像也可以轻松更改，你只需要一个 image-to-base64 converter .

除了图像之外，我还必须扩展放置处理程序代码以处理文本文件:

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 目标的 HTML 代码 <div>看起来像这样:

<div id="holder" class="">
    <p>hello, world</p>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggkFBTzlUWEwwWTRPSHdBQUFBQkpSVTVFcmtKZ2dnPT0=" width="250">
</div>