Question

我们都知道在html / html5中有选择文件/文件的选项，但我不想要在html / Jquery中的Windows / Linux / MacOS上选择文件夹或目录。我已经看到一些解决方案，从对话框中选择文件夹，但这不适用于Firefox或除Chrome之外的任何其他浏览器。

请帮帮我。

Answer 1

编辑：经过更好的解释后，我认为您不能简单地拖动文件夹，也不能使用JavaScript的FileAPI选择整个文件夹。但是，如果您可以提醒用户在目录中按 CTRL + A 来选择所有文件，那么您就是金色的。我放在一起的例子可以通过混合来自HTML5Rocks的the FileAPI tutorial的两个例子来实现：

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>

    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        files = evt.dataTransfer.files; // FileList object.

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    // Setup the dnd listeners.
    var dropZone = document.getElementById('drop_zone');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);

</script>

您需要确保用户使用的是更现代的浏览器，我在Chrome中尝试过并且它可以正常工作，我可以假设Firefox会，而且我不确定哪个版本的IE开始支持FileAPI。

我在此处保留原始回复以供参考，认为该请求也是为了获取用户的本地路径。

我不相信用JavaScript可以做到这一点。即使使用新的HTML5 FileAPI，它看起来似乎没有实现接口来捕获用户的本地文件位置，可能是出于安全原因：

7. The File Interface

//This interface describes a single file in a FileList and exposes its name. It inherits from Blob.
[Constructor(Blob fileBits, [EnsureUTF16] DOMString fileName)]
interface File : Blob {

  readonly attribute DOMString name;
  readonly attribute Date lastModifiedDate;

};

Answer 2

我知道这是几个月前发布的，但万一其他人正在搜索它，至少这是一个如何选择谷歌浏览器目录的答案。

<input type="file" multiple webkitdirectory id="directory" />

要在您的网站上显示它们，您可以使用以下代码（假设您有一个带有ID＆＃34; fileOutput＆＃34;。

<script type="text/javascript">
(function(){
        var files, 
            file, 
            extension,
            input = document.getElementById("directory"), 
            output = document.getElementById("fileOutput");

        input.addEventListener("change", function(e) {
            files = e.target.files;
            output.innerHTML = "";

            for (var i = 0, len = files.length; i < len; i++) {
                file = files[i];
                extension = file.name.split(".").pop();
                output.innerHTML += "<li class='type-" + extension + "'>" + file.name + "</li>";
            }
        }, false); 
})();
</script>

获取Jquery中任何操作系统上的目录/文件夹的完整路径

2 个答案: