Dojo Uploader与拖放 [英] Dojo Uploader with Drag and Drop

问题描述

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

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

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

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

为addDropTarget返回undefined，为uploadType返回iframe. 我在各种浏览器上进行了尝试，甚至还添加了一些功能:上载器中的html5，但没有任何改变.

请注意，除了dnd之外，其他一切都正常.

我正在使用dojo 1.8.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/

I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:

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

Copying the exact same code in jsfiddle or in my application the line

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

returns undefined for addDropTarget and iframe for the uploadType. I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.

Please, note that everything works ok except from the dnd.

I am using dojo 1.8.1.

解决方案

In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :

<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>

And in the 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); 
        }
    });
});

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

这篇关于Dojo Uploader与拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！