您的位置:首页> 前端教程> HTML教程
文章导航

HTML input file 文件域

2018-10-25 10:52| 作者: admin| 查看: 4128| 评论: 0|来自: 蚂蚁部落

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

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

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

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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):规定文件域可以一次上传多个文件。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  文件上传:<input type="file" required name="file" />
  <input type="submit" value="提交表单">
</form>
</body>
</html>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  文件上传:<input type="file" autofocus  name="file" />
  <input type="submit" value="提交表单">
</form>
</body>
</html>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" enctype="multipart/form-data" action="do.php">
  文件上传:<input type="file" disabled  name="file" />
  <input type="submit" value="提交表单">
</form>
</body>
</html>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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属性规定文件域只能上传纯本文文件。

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部