零基础学习HTML(19)——input标签（三）

Dragon水魅

发布于 2026-01-23 14:45:04

710

注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

可以通过 input 标签的 type 属性设置文件上传：

<!DOCTYPE html>
<html>
<head>
    <title>第十九节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="upload.php" method="POST" enctype="multipart/form-data">
		<!-- input 实现文件上传 -->
        <label>请选择要上传的文件：<input type="file" name="file"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

可以通过设置 input 标签的 accept 属性设置上传文件类型：

<!DOCTYPE html>
<html>
<head>
    <title>第十八节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="upload.php" method="POST" enctype="multipart/form-data">
		<!-- accept 限制文件上传类型 -->
        <label>请选择要上传的文件：<input type="file" name="file" accept="image/*"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

可以通过设置 MAX_FILE_SIZE 属性设置上传文件的最大尺寸：

<!DOCTYPE html>
<html>
<head>
    <title>第十八节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="upload.php" method="POST" enctype="multipart/form-data">
        <!-- 限制上传文件的尺寸 -->
        <input type="hidden" name="Max_FILE_SIZE" value="1024">
        <label>请选择要上传的文件：<input type="file" name="file" accept="image/*"></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>

可以通过设置 multiple 属性实现多个文件上传：

<!DOCTYPE html>
<html>
<head>
    <title>第十八节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="upload.php" method="POST" enctype="multipart/form-data">
        <!-- 实现多个文件上传 -->
        <input type="hidden" name="MAX_FILE_SIZE" value="1024">
        <label>请选择要上传的文件：<input type="file" name="file" accept="image/*" multiple></label>
        <br><br>
        <input type="submit" value="提交">
	</form>
</body>
</html>