2015-05-05 2 views
2

Я хочу разрешить пользователям перетаскивать и загружать каталог и файлы.Управление каталогом/загрузкой файлов одним вводом javascript

я знаю, что я мог бы создать

<input type="file" multiple /> 
<!-- for files/multiple files upload--> 

и

<input type="file" directory mozDirectory webkitDirectory /> 
<!-- for directory uploads --> 

я попытался обнаруживая в то время как пользователь перетаскивает элемент, если это каталог или файл и настройки атрибутов каталогов в зависимости от этого, но повороты что javascript не позволяет вам это проверить.

также я видел на многих веб-сайтах, что пользователи могут одновременно перетаскивать как файлы, так и каталоги и даже несколько каталогов.

как я могу это достичь?

ответ

4

Перемещение и droppping папок доступен в Chrome >= 21

Вот что вам нужно (не пробовал, но он может дать вам идею):

function traverseFileTree(item, path) { 
    path = path || ""; 
    if (item.isFile) { 
    // Get file 
    item.file(function(file) { 
     console.log("File:", path + file.name); 
    }); 
    } else if (item.isDirectory) { 
    // Get folder contents 
    var dirReader = item.createReader(); 
    dirReader.readEntries(function(entries) { 
     for (var i=0; i<entries.length; i++) { 
     traverseFileTree(entries[i], path + item.name + "/"); 
     } 
    }); 
    } 
} 

dropArea.addEventListener("drop", function(event) { 
    event.preventDefault(); 

    var items = event.dataTransfer.items; 
    for (var i=0; i<items.length; i++) { 
    // webkitGetAsEntry is where the magic happens 
    var item = items[i].webkitGetAsEntry(); 
    if (item) { 
     traverseFileTree(item); 
    } 
    } 
}, false); 

Более подробную информацию можно найти here

Ответа на этот вопрос here

+0

спасибо за функцию дерева, это будет полезно, но как я могу узнать, если и ser перетащил папку или элемент во вход? –

+0

Я использую его с TypeScript и в Firefox, и он работает. –

+0

@ JohannesFlügel Рад это услышать .. :) Happy Coding .. Cheers. –