javascript - jQuery : a drag-and-drop upload with multi dropzone - Stack Overflow

admin管理员组

文章数量:1340539

I want to develop a tree of folders and files with a drag-and-drop upload on folders.

Example:

For the drag-and-drop upload, I fund jQuery File Upload.

The basic code is:

$('#fileupload').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $(document),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

In my project, I've multi dropzone (my folders) like for example :

<ul>
    <li>Bookmarks</li>
    <li>Search</li>
    <li>Web dev</li>
    ...
</ul>

How to change the code above to handle the multi dropzone with id, class and jQuery selectors?

---

I tried something like this but obviously it doesn't work:

<ul>
    <li id="folder1" class="folder">Bookmarks</li>
    <li id="folder2" class="folder">Search</li>
    <li id="folder3" class="folder">Web dev</li>
    ...
</ul>

.

$('.folder').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $('.folder'),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text($(this).attr(id)).appendTo(document.body);
        });
    }
});

Issues:

• the upload is done 3 times.
• $(this) doesn't exist.

I want to develop a tree of folders and files with a drag-and-drop upload on folders.

Example:

For the drag-and-drop upload, I fund jQuery File Upload.

The basic code is:

$('#fileupload').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $(document),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

In my project, I've multi dropzone (my folders) like for example :

<ul>
    <li>Bookmarks</li>
    <li>Search</li>
    <li>Web dev</li>
    ...
</ul>

How to change the code above to handle the multi dropzone with id, class and jQuery selectors?

---

I tried something like this but obviously it doesn't work:

<ul>
    <li id="folder1" class="folder">Bookmarks</li>
    <li id="folder2" class="folder">Search</li>
    <li id="folder3" class="folder">Web dev</li>
    ...
</ul>

.

$('.folder').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $('.folder'),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text($(this).attr(id)).appendTo(document.body);
        });
    }
});

Issues:

• the upload is done 3 times.
• $(this) doesn't exist.

• javascript
• jquery
• upload
• drag-and-drop
• treeview

Share Improve this question Follow edited Dec 14, 2016 at 7:25 GG. asked Dec 23, 2011 at 13:11 GG.GG. 21.9k1414 gold badges9292 silver badges133133 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

I found a solution with a colleague.

Actually it wasn't plicated:

    $('.folder').each(function(){
        var $this = $(this);

        $this.fileupload({
            dataType: 'json',
            url: 'php/index.php',
            dropZone: $this,
            done: function (e, data) {
                $.each(data.result, function (index, file) {
                    $('<p/>').text($this.attr('id')).appendTo(document.body);
                });
            }
        });
    });

Edit: My bad, this answer was in the documentation.

本文标签： javascriptjQuerya draganddrop upload with multi dropzoneStack Overflow