📌  相关文章
📜  input type=file'' 只接受 doc 和 pdf (1)

📅  最后修改于: 2023-12-03 15:01:24.687000             🧑  作者: Mango

使用input标签中的type=file只接受doc和pdf文件

简介

在Web开发中，input标签是最常见的表单控件之一。其中，type=file属性使得用户上传文件变得十分方便。然而，在某些情况下，我们只想接受特定类型的文件，这时就需要限制上传文件的类型。本文将介绍如何使用input标签中的accept属性，限制用户上传的文件类型并仅接受doc和pdf格式的文档。

实现细节
accept属性

accept属性是input标签中的一个属性，在type=file时使用。当用户打开文件上传对话框时，文件类型筛选器将仅显示accept属性所规定的文件类型。

accept属性值

accept属性值是一组通过类型/扩展名、MIME类型或MIME类型与文件扩展名的组合，来指定文件上传输入的类型限制。对应到本题，我们需要限定两种类型，分别为application/msword和application/pdf，因此accept属性值应为：

accept=".doc,.docx,application/msword,application/vnd.ms-excel,application/pdf"
完整代码

以下为示例代码。该代码片段通过HTML和CSS实现了一个简单的表单界面，界面中用户可以上传.doc、.docx和.pdf三种格式的文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上传文档</title>
		<style>
			body {
				margin: 30px auto;
				text-align: center;
			}
			h1 {
				font-size: 2em;
			}
			form {
				display: inline-block;
				border: 1px solid gray;
				padding: 10px 20px;
			}
			input[type="submit"] {
				padding: 10px 15px;
				font-size: 1.2em;
				background-color: #488aff;
				color: white;
				border-radius: 5px;
				border: none;
				cursor: pointer;
			}
			input[type="file"] {
				display: block;
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<h1>上传文档</h1>
		<form method="POST" enctype="multipart/form-data">
			<label for="document">请选择文档</label>
			<input type="file" id="document" name="document" accept=".doc,.docx,application/msword,application/vnd.ms-excel,application/pdf">
			<input type="submit" value="上传">
		</form>
	</body>
</html>
总结

本文介绍了如何通过input标签中的accept属性，限制用户上传文件的类型，并且仅接受doc和pdf格式的文档。使用accept属性能够让用户上传文件更加便捷，同时也能保证所上传的文件与业务需求相符。