Problem
我有以下代码片段,用于在文件拖放上传期间获取文件信息:
var files = event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// I need notDirectory(file) function.
notDirectory(file).then(function(file) {
output.innerHTML +=
`<p>
Name: ${file.name}</br>
Size: ${file.size} bytes</br>
Type: ${file.type}</br>
Modified Date: ${file.lastModifiedDate}
</p>`;
});
}
我做了研究,发现Firefox不支持目录上传,但允许客户端将它们拖放到放置区域。
Question
如何在 Firefox 中过滤掉上传处理程序中的目录?
Update
您可以在这里找到工作示例:https://jsfiddle.net/gevorgha/exs3ta25/ https://jsfiddle.net/gevorgha/exs3ta25/
请考虑我需要它来工作最新稳定的 Firefox 版本 -
46.0.1 https://www.mozilla.org/en-US/firefox/releases/无需从浏览器启用额外的首选项,因为我不想要求用户启用首选项以使上传正常工作。
我的问题是最新稳定的 Firefox 有没有任何解决方法
版本来检测目录?因为在稳定版本上该功能
默认情况下是禁用的还是我错过了什么?
firefox 47默认不启用目录上传,尝试过html
, javascript
在 stacksnippets、jsfiddle。
See 面向开发者的 Firefox 42 接口/API/DOM https://developer.mozilla.org/en-US/Firefox/Releases/42#InterfacesAPIsDOM
The Directory
接口已被实验性扩展(bug1177688 https://bugzilla.mozilla.org/show_bug.cgi?id=1177688)。两位成员Directory.path
and
Directory.getContents
可以通过设置来暴露dom.input.dirpicker
偏好true
.
检测文件夹上传的解决方法可能包括
- Use
<input type="file">
with directory
and allowdirs
属性集,可能包括multiple
属性,参见Note https://wicg.github.io/directory-upload/proposal.html#h-note6,用于拖放或用户单击容器进行选择;
- Open
prefs.js
or about:config
并设置dom.input.dirpicker
偏好Boolean
true
;
- 使用“代码示例”的修改版本进行“1.文件输入”,位于目录上传演示 https://wicg.github.io/directory-upload/;
- 检查上传是否是Directory https://wicg.github.io/directory-upload/proposal.html#idl-def-directory并且没有一个
File
对象、使用if
有条件(filesAndDirs[0] && filesAndDirs[0].constructor.name === "Directory")
or (filesAndDirs[0] instanceof Directory)
代替.then(function(filesAndDirectories){})
在链接到.getFilesAndDirectories() https://wicg.github.io/directory-upload/proposal.html#dom-htmlinputelement-getfilesanddirectories;
- 代替
<label>
元素为<div>
元素作为父元素<input type="file">
。调整css
of input type="file"
填充父级可放置容器并设置opacity
to 0
;调整css
在 的父元素处input type="file"
显示文本于:before
伪元素,超过input type="file"
子元素。
也可以看看用于目录选取和拖放的新 API https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop.
请注意,该方法已在 firefox 47 上尝试过,其中目录和单个文件均已成功上传。
var dropArea = document.getElementById("dropArea");
var output = document.getElementById("result");
var ul = output.querySelector("ul");
function dragHandler(event) {
event.stopPropagation();
event.preventDefault();
dropArea.className = "area drag";
}
function filesDroped(event) {
event.stopPropagation();
event.preventDefault();
dropArea.className = "area";
var uploadFile = function(file, path) {
// handle file uploading
console.log(file, path);
var filesInfo = `<li>
Name: ${file.name}</br>
Size: ${file.size} bytes</br>
Type: ${file.type}</br>
Modified Date: ${file.lastModifiedDate}
</li>`;
ul.innerHTML += `${filesInfo}`;
};
var iterateFilesAndDirs = function(filesAndDirs, path) {
for (var i = 0; i < filesAndDirs.length; i++) {
if (typeof filesAndDirs[i].getFilesAndDirectories === 'function') {
var path = filesAndDirs[i].path;
// this recursion enables deep traversal of directories
filesAndDirs[i].getFilesAndDirectories()
.then(function(subFilesAndDirs) {
// iterate through files and directories in sub-directory
iterateFilesAndDirs(subFilesAndDirs, path);
});
} else {
uploadFile(filesAndDirs[i], path);
}
}
};
if ("getFilesAndDirectories" in event.target) {
event.target.getFilesAndDirectories()
.then(function(filesAndDirs) {
// if directory
var dir = filesAndDirs;
if (dir[0] && dir[0].constructor.name === "Directory") {
console.log(dir);
var directoryInfo = `<li>
Directory Name: ${dir[0].name}</br>
Path: ${dir[0].path}
</li>`;
ul.innerHTML += `${directoryInfo}`;
alert("isDirectory:true");
}
iterateFilesAndDirs(dir, "/");
})
} else {
// do webkit stuff
}
}
dropArea.addEventListener("dragover", dragHandler);
dropArea.addEventListener("change", filesDroped);
input[type="file"] {
width: 98%;
height: 180px;
}
label[for="file"] {
width: 98%;
height: 180px;
}
.area {
display:block;
border: 5px dotted #ccc;
text-align: center;
}
.area:after {
display: block;
border:none;
white-space: pre;
/*content: "Drop your files here!\aOr click to select files";*/
position: relative;
left: 0%;
top: -75px;
text-align:center;
}
.drag {
border: 5px dotted green;
background-color: yellow;
}
#result ul {
list-style: none;
margin-top: 20px;
}
#result ul li {
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
<label id="dropArea" class="area">
<input id="file" type="file" allowdirs directory webkitdirectory/>
</label>
<output id="result">
<ul></ul>
</output>
jsfiddlehttps://jsfiddle.net/exs3ta25/31/ https://jsfiddle.net/exs3ta25/31/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)