4

我正在尝试使用输入类型文件上传目录。它在 GoogleChrome 和 FireFox 中运行良好，但是当我在 Safari 浏览器中对其进行测试时，它无法允许用户选择单个文件。有没有办法限制用户选择单个文件，只允许在 Safari 浏览器中选择文件夹。

这是我正在使用的代码：

const UploadFolder = props => {
  return (
<span>
<a className="dropdown-item" href='#'>
  <i className="fa fa-cloud-upload mr-2 upload-icon" aria-hidden="true"></i>Upload Files Folder</a>
 <input type='file' onChange={(e) => { props.onFolderSelect(e) }} 
 directory="" webkitdirectory="" mozdirectory="" allowdirs="" multiple />
</span>
)
}

export default UploadFolder;

如果有人知道 Safari 浏览器的解决方案，请指导我。

任何帮助将不胜感激。

提前致谢，

4

2 回答 2

0

我认为没有必要伪造一个 256 长度的扩展字符串。任何文件都无法匹配的扩展名也可以使用。我对 NCTH 的回答稍作调整。

const fakeExtension = `..`; // no file will match this;

return (
  <input
    type="file"
    accept={fakeExtension}
    webkitdirectory=""
  />
);
于 2021-12-10T06:21:15.213 回答
0

嗨，我找到了一种使 safari 只能选择一个文件夹的方法，但是通过使用接受扩展名来阻止 safari 中的所有文件扩展名，这可能有点棘手

在 macOS 中，最大文件扩展名长度限制为 255 个字符，因此我将生成长度超过 255 个字符的随机扩展名并将其传递给 webkitDirectory 输入类型文件

// Example
const fakeExtension = `.${a.repeat(256)},`;
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
return (
  <input
    type="file"
    id="folder-uploader"
    accept={isSafari ? fakeExtension : ''}
    webkitdirectory=""
  />
);
于 2021-11-11T15:29:55.030 回答