1

我正在为 WordPress Drag 'n' Drop 上传器制作一个解决方法插件原型，以帮助将 DnD 文件上传直接包含到系统中（生成正确的数据库条目等），而不会增加太多开销、重建或黑客攻击。

我遇到了一个障碍，试图获取放入元素中的文件并以编程方式模拟它们被放入不同的元素（以触发 WP 中的本机上传序列）。

JS

$('#uploader').on(
    {dragenter: function(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log('dragenter');
    },
    dragover: function(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log('dragover');
    },
    drop: function(e){
        if(e.originalEvent.dataTransfer){
            if(e.originalEvent.dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                /*Do Stuff*/
        var id, remoteFrame, uploader, plupload, file, i, files = [], id, fileNames = {}, native_files;

                    remoteFrame = $('#media_uploader_hidden')[0].contentWindow; // iFrame context
                    plupload = remoteFrame.plupload // localize
                    uploader = remoteFrame.uploader; // localize

                    native_files = e.originalEvent.dataTransfer.files; // raw files

                // Initialize Runtime
                plupload.runtimes['Html5'].init(uploader,function(){console.log('initialized HTML5')});

                // Add files to the file queue
                for (i = 0; i < native_files.length; i++) {
                    file = native_files[i];

                    // Safari on Windows will add first file from dragged set multiple times
                    // @see: https://bugs.webkit.org/show_bug.cgi?id=37957
                    if (fileNames[file.name]) {
                        continue;
                    }
                    fileNames[file.name] = true;

                    // Store away gears blob internally
                    id = plupload.guid();

                    // Create queue array with id, name and size
                    files.push(new plupload.File(id, file.fileName || file.name, file.fileSize || file.size)); // fileName / fileSize deprecated
                }

                // Trigger FilesAdded event if we added any
                if (files.length) {
                    uploader.trigger("FilesAdded", files);
                }

                console.log(uploader.files);


            }   
        }
        console.log('drop');
    }},
    '.drag-drop-area'
);

HTML：

<div id="uploader"><div class=".drag-drop-area"></div></div>
<div id="test"></div>

我确实有一个日志集以在某些内容“丢弃”到#test 时触发。

最终，被删除的文件将被定向到带有 WordPress 媒体上传器的隐藏 iFrame 中的元素。

编辑： 一直在寻找一种直接插入 Plupload（WordPress 用于 DND 的 jQuery 插件）以将文件添加到队列中的方法 - 但找不到任何东西。似乎所有“添加到队列”功能都包含在内。

4

0 回答 0