how to get fullpath of dropped folder from file sy

2019-03-31 00:32发布

站内问答 / 前端开发
792 3 4

I am trying to implement drag n drop in my application, which need the full path of folder being dropped.

I have done something like this

<html>
<head>
<style>
#dropzone {
    height:200px;
    width: 200px;
    border: 10px dashed #0c0;
    background-color:cyan;
}
</style>                  
</head>
<body>

<div id="dropzone" droppable="true" ondrop ="drop(event)" ondragenter="return false" ondragover="return false">
</div>

<script type="text/javascript">  
function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
        var entry = e.dataTransfer.items[i].webkitGetAsEntry();
        if (entry.isDirectory) {
            alert(entry);//here i need to get path of folder being dropped.
        }
    }
}
</script>
</body>
</html

If I alert e.dataTransfer.files[i].name inside for loop then it only show name of folder but not it's path.

Does javascript allow access to local file system? OR any workaround for this.

3条回答
家丑人穷心不美
2楼-- · 2019-03-31 00:55

try

e.dataTransfer.files[0].path

which will give you folder path.

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-03-31 01:05
  • getAsFile does not expose a path-Property. -- not in Chrome -- in IE even dataTransfer.items is unsupported.
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
4楼-- · 2019-03-31 01:08

Does javascript allow access to local file system?###

Short anwser: no.

So how to get the fullpath of a dropped folder?

It's easy, all you need to do is get the dropped item as a file.

What does it change?

In your code above you have e.dataTransfer.items[i].webkitGetAsEntry().

The webkitGetAsEntry() method is really useful as it returns an ''Entry'' object. You can do cool stuffs like, for instance:

  • Check if the entry is a file or a directory.

Now, the getAsFile() method returns a File Object which contains all the goodies related to the actual file. Take a look at the below code (I modified your code).

Code :

/*
 *  Store your data for an easy access.
 */ 
var items  = e.dataTransfer.items;

/*
 *  Loop through items.
 */
for (var i = 0; i < items.length; i++) 
{
    // Get the dropped item as a 'webkit entry'.
    var entry = items[i].webkitGetAsEntry();

    if (entry.isDirectory) 
    {
        /*
         *  getAsFile() returns a File object that contains
         *  some useful informations on the file/folder that has 
         *  been dropped.
         *
         *  You get the following properties :
         *    - lastModified (timestamp)
         *    - lastModifiedDate
         *    - name (...of the file)
         *    - path (fullpath)
         *    - size
         *    - type
         *    - etc. (...some other properties and methods)
         *
         *  So you can do the following to retrieve the path of the 
         *  dropped folder.
         */
        alert(items[i].getAsFile().path);
    }
}

Or even simplier:

var items  = e.dataTransfer.items;      // -- Items

for (var i = 0; i < items.length; i++) 
{
    // Get the dropped item as a 'webkit entry'.
    var entry = items[i].webkitGetAsEntry();

    // Get the same dropped item, but as a File.
    var file = items[i].getAsFile();

    if (entry.isDirectory) 
    {
        alert(file.path);
    }
}

So as you see, nothing keeps you from using both. You get the ''Entry'' object to check if you are dealing with a Folder or a File and you can use the getAsFile() method afterwards to access the information related to the dropped item (like the path).

Hope it helps!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)