如何识别javascript中文件和文件夹ondropping之间的区别？答案

【问题标题】：How to identify the difference between file and folder ondropping in javascript?如何识别javascript中文件和文件夹ondropping之间的区别？
【发布时间】：2017-11-18 03:54:37
【问题描述】：

我有一个允许删除文件和文件夹的容器。我想确定放置项目类型（文件或文件夹）和确切的放置项目的文件夹或文件路径。

注意：如果我使用 webkitGetAsEntry()，我可以获得项目详细信息，但我不想使用它。

有人建议我使用 files[0].size == 4096（用于识别文件夹），但它并没有给出完全正确的 4096。它的变化。

提前致谢。

【问题讨论】：

标签： javascript jquery html angularjs drag-and-drop

【解决方案1】：

这可能会有所帮助。它可以改进，但可以完成工作：

function drop_type(string)
{
    return /(\.[a-z0-9]{2,5})$/i.test(string) ? 'file' : 'directory';
}

这里是JSFIDDLE。

这是一个肮脏的解决方案，但有效。在正则表达式中，您可以添加扩展名并匹配它。

【讨论】：

【解决方案2】：

您可以使用if (!f.type && f.size % 4096 == 0) 检查文件夹以进行文件夹检测。请看下面的sn-p。

function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files,
        folders = 0,
        other = 0;

    for (var i = 0, f; f = files[i]; i++) { // iterate in the files dropped
        if (!f.type && f.size % 4096 == 0) folders++;
        else other++;
    }
    
    if (folders && !other) {
        if (folders > 1) info.innerHTML = 'You dropped ' + folders +' folders!';
        else info.innerHTML = 'You dropped 1 folder!';
    } else if (!folders && other) {
        if (other > 1) info.innerHTML = 'You dropped ' + other +' files!';
        else info.innerHTML = 'You dropped 1 file!';
    } else {
        if (folders > 1) info.innerHTML = 'You dropped ' + folders +' folders ';
        else info.innerHTML = 'You dropped 1 folder ';
        if (other > 1) info.innerHTML += 'and ' + other +' files!';
        else info.innerHTML += 'and 1 file!';
    }
}

function handleDragOver(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
}

function handleDragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
    info.innerHTML = '<b>Dragging...</b>';
}

function handleDragLeave(e) {
    e.stopPropagation();
    e.preventDefault();
    info.innerHTML = '';
}

var dropZone = document.getElementById('drop_zone'),
    info = document.getElementById('info');

dropZone.addEventListener('dragenter', handleDragEnter, false);
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('dragleave', handleDragLeave, false);
dropZone.addEventListener('drop', handleDrop, false);

#drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font-family: sans-serif;
    font-size: 1.5em;
    color: #bbb;
}
#info {
    font-family: monospace;
    font-size: 18px;
}

<div id="drop_zone">Drop files here</div>
<div id="info"></div>

【讨论】：

此检查错误地将没有扩展名且大小为 4096 字节的倍数的文件分类为文件夹。

【解决方案3】：

这是我使用的一个函数。（也支持IE11）

JS函数

    function isFile(file, callback) {
    var start = 0; //start byte
    var stop = 4; // end byte - to avoid read all the content
    var reader = new FileReader();
    reader.onloadend = function (evt) {
        if (evt.target.readyState == FileReader.DONE) {
            var binary = "";
            var bytes = new Uint8Array(evt.target.result);
            var length = bytes.byteLength;
            if (length == 0) {
                callback(false);
            } else {
                callback(true);
            }
        } else {
            callback(false);
        }
    };
    var blob = file.slice(start, stop + 1);
    reader.readAsArrayBuffer(blob);
}

用法

    isFile(file, function (e) {
        alert( e ? "It's a File": "Nope ! It's a Folder");
    });

工作示例：https://jsfiddle.net/rukshanf/t9uxbkc0/

【讨论】：