HTML input file 文件域

小灰灰 2020-05-16 18:01 850阅读 0赞

# HTML input file 文件域

`<input>` 标签 type 属性值设置为 file 即可创建一个文件域。

使用文件域时，form 的 enctype 属性值必须设置为“multipart/form-data”。

文件域可以实现文件的上传，比如图片、压缩包等。

**代码实例：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  文件上传:<input type="file" name="file" />
</form>
</body>
</html>
```

上面代码简单演示了文件域的使用，默认情况下它的表现形式在不同浏览器或许有所不同。

特别说明：通常情况下，利用 name 属性将表单数据提交到后台。

文件域还具有其他属性，下面分别做一下介绍：

（1）.required（HTML5）:规定文件域内容是必填的。

（2）.form（HTML5）:规定文件域所属的一个或多个表单。

（3）.autofocus（HTML5）：规定在页面加载时，域自动地获得焦点。

（4）.disabledy：设置文件域为不可用。

（5）.accept（HTML5）：规定允许上传的文件MIME类型。

（5）.multiple（HTML5）：规定文件域可以一次上传多个文件。

**代码实例:**

通过required设置文件域为必填项目，否则报错。

通过autofocus属性设置加载完毕后，自动设置文件域获取焦点。

通过disabled属性，设置文件域为不可用。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  文件上传:
  <br/>
  <input type="file"  name="file" accept="text/plain"/>
  <input type="submit" value="提交表单">
</form>
</body>
</html>
```

通过accept属性规定文件域只能上传纯本文文件。

特别说明：永远不要相信前端验证限制的安全性，所以还需要在后端进行限制。