具有拖放功能的 Dojo 上传器

Posted 2023-02-16

【中文标题】具有拖放功能的 Dojo 上传器

【英文标题】：Dojo Uploader with Drag and Drop

【发布时间】：2013-08-15 03:56:48

【问题描述】：

我正在尝试在我的项目中重新创建此示例，以将拖放功能添加到 dojo 上传器：

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html

在 jsfiddle 或我的应用程序中复制完全相同的代码行

if(uploader.addDropTarget && uploader.uploadType=='html5')

为 addDropTarget 返回 undefined，为 uploadType 返回 iframe。 我尝试了各种浏览器，甚至在上传器中添加了 force: html5 但没有任何改变。

请注意，除了 dnd，一切正常。

我正在使用 dojo 1.8.1。

【问题讨论】：

你能粘贴你的代码吗？您是否使用 multiple="true" 设置了文件输入？你需要 html5 插件吗？您是否尝试将上传选项“强制”设置为“html5”？你用的是什么浏览器？...

是的，我添加了它，并且我还需要 html5 插件。关于文件选择和上传部分，一切正常。我只是想启用 dnd 功能。用 chrome 和 firefox 测试。

哦，对不起。你能发布你的代码吗？

Philippe，我使用的代码与链接中的代码完全相同。

你用的是什么浏览器？因为如果它在链接中而不是在您的代码中有效，那么某处肯定存在差异......

【参考方案1】：

在 dojo 1.8 中，上传器尚未完全兼容 AMD。因此，为了使主干测试中的示例在 1.8 中工作，您需要使用 dojox.form.Uploader 构造函数而不是所需的 AMD 模块以编程方式创建上传器。如下：

<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
    <fieldset>
        <legend>DnD Test</legend>
        <input class="browseButton" id="uploader"/>
        <input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
        <div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
    </fieldset>
</form>

<div id="dropTarget">Drop files here !</div>

在 javascript 中：

require([
    'dojo/parser',
    'dojo/dom',
    'dijit/registry',
    'dojox/form/Uploader',
    'dojox/form/uploader/FileList',
    'dojox/form/uploader/plugins/HTML5',
    'dojo/domReady!'
], function(parser, dom, registry, ready)

    var dropTarget = dom.byId('dropTarget'), uploader;

    parser.parse().then(function()

        // You need to use dojox.form.Uploader, as in dojo 1.8, 
        // the module is not fully AMD compliant yet.

        uploader = new dojox.form.Uploader(
            name:'uploadedfile', 
            label:'Select Some Files',
            multiple:true, 
            force:'html5'
        , 'uploader');

        uploader.startup();

        if(require.has('file-multiple'))
            console.debug("Adding a new drop target");
            registry.byId('uploader').addDropTarget(dropTarget); 
        
    );
);

见http://jsfiddle.net/psoares/6r2jZ/

【讨论】：

太棒了！但是，现在上传按钮不起作用。有什么线索吗？