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

最新推荐文章于 2024-03-25 00:11:20 发布

Dragon水魅

最新推荐文章于 2024-03-25 00:11:20 发布

阅读量330

点赞数

分类专栏：零基础学习Web开发文章标签： html

本文链接：https://blog.csdn.net/qq_43650934/article/details/108893950

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

注：学习笔记基于小甲鱼学习视频，官方论坛：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>