前端的小玩意（11）上传文件和上传文件的后缀名限制

太过爱你忘了你带给我的痛 2022-07-15 23:09 353阅读 0赞

## 上传文件： ##

引用自：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using\_FormData\_Objects

①需要使用FormData这个对象。

②兼容性：

需要至少IE10

③类似用<form></form>标签

④方法：

先new一个FormData对象

var form = new FormData();

然后利用.append(key, value)的方法来添加内容；

form.append("file", file);

这里的file是你要上传的文件；

具体而言，假如你获取到了这个标签<input type="file"/> 他的变量名为file

那么，放在这个append方法中第二个参数位置是应该是这样：file.files\[0\]

## 后缀名限制： ##

引用：

[http://www.dewen.net.cn/q/3470][http_www.dewen.net.cn_q_3470]

[http://www.w3cschool.cn/htmltags/att-input-accept.html][http_www.w3cschool.cn_htmltags_att-input-accept.html]

*可以使用accept属性  
<input type="file" accept="image/gif, image/jpeg" >  
如果不限制图像的格式，可以写为：accept="image/\*"。  
accept：MIME\_type 用逗号隔开的 MIME 类型列表。*

注：

第二个链接更全一些

<table> 
 <tbody> 
  <tr> 
   <td style="background:#BDBDBD"> <p><strong><span style="color:white">值</span></strong></p> </td> 
   <td style="background:#BDBDBD"> <p><strong><span style="color:white">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>audio/*</p> </td> 
   <td> <p>接受所有的声音文件。</p> </td> 
  </tr> 
  <tr> 
   <td style="background:#EFEFEF"> <p>video/*</p> </td> 
   <td style="background:#EFEFEF"> <p>接受所有的视频文件。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>image/*</p> </td> 
   <td> <p>接受所有的图像文件。</p> </td> 
  </tr> 
  <tr> 
   <td style="background:#EFEFEF"> <p><em>MIME_type</em></p> </td> 
   <td style="background:#EFEFEF"> <p>一个有效的 MIME 类型，不带参数。请参阅&nbsp;<a href="http://www.iana.org/assignments/media-types/" rel="nofollow"><span style="color:#900B09">IANA MIME</span><span style="color:#900B09">类型</span></a>，获得标准 MIME 类型的完整列表。</p> </td> 
  </tr> 
 </tbody> 
</table>

[http_www.dewen.net.cn_q_3470]: http://www.dewen.net.cn/q/3470
[http_www.w3cschool.cn_htmltags_att-input-accept.html]: http://www.w3cschool.cn/htmltags/att-input-accept.html