Question

我正在为WordPress Drag'n'Drop uploader创建一个变通插件原型，以帮助将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上时触发。

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

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

jQuery / JS重定向文件放到另一个元素

0 个答案: