表单文件接受 ReactJS 中的类型

Question

我有一个简单的表格：

<form className="form-horizontal form-border" enctype="multipart/form-data">
     <div className="form-group">
         <label className="col-sm-3 control-label">Name</label>
         <div className="col-sm-4">
             <input type="text" className="form-control" ref="patch_name" required="" placeholder="Patch name" />
         </div>
     </div>

     <div className="form-group">
         <label className="col-sm-3 control-label">Description</label>
         <div className="col-sm-4">
             <input type="text" className="form-control" ref="patch_description" required="" placeholder="Patch description" />
         </div>
     </div>

     <div className="form-group">
         <label className="col-sm-3 control-label">Patch File</label>
         <div className="col-sm-4">
             <input type="file" accept="compress/*" name="patch_file" />
         </div>
     </div>

     <div className="form-group">
         <div className="col-sm-3" />
         <div className="col-sm-1">
             <input type="submit" className="btn btn-primary btn-block" value="Create Patch" />
         </div>
     </div>
 </form>

我希望能够只接受tar.gz 文件上传。我能得到的唯一“类型”是image/*。

我在哪里可以获得类型列表？

Answer 1

这与 React 没有任何关系。看看这个答案，它描述了如何使用 HTML accept 属性：File input 'accept' attribute - is it useful?

.gz 文件的正确 MIME 类型是 application/gzip。 .tar.gz 没有正式的 MIME 类型（因为 .tar.gz 实际上不是文件格式，而是gzip 文件中的 TAR 文件的命名约定）。有时使用application/x-gtar，但它是非标准的（因此是x-）和YMMV。您也可以在accept 中使用文件扩展名，但支持参差不齐，而且我测试过的浏览器都没有像我们预期的那样处理.tar.gz 中的两个点。

HTML specification 有以下注释：

鼓励作者在查找特定格式的数据时指定任何 MIME 类型和任何相应的扩展名。

考虑到这一点，您最好的选择可能是：

<input type="file" accept="application/gzip, .gz" />