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 文件上传。我能得到的唯一 "type" 是 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 中使用文件扩展名，但支持参差不齐，我测试过的浏览器 none 处理了 .tar.gz 中的两个点，正如我们预期的那样。

HTML specification有如下注释：

Authors are encouraged to specify both any MIME types and any corresponding extensions when looking for data in a specific format.

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

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

ReactJS 中的表单文件接受类型

Form file accept type in ReactJS

forms

reactjs