如何使用 HTML 将文件上传到网站？

有时网站需要上传文件，如图片、文档等，用户需向服务器传送数据。本文将介绍 HTML 的表单元素 enctype、method 和 input 实现文件上传以及后端如何接收和处理数据。

enctype 属性

enctype 属性设定表单数据的编码类型。当表单包含文件时，必须将 enctype 属性设置为 "multipart/form-data"。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

method 属性

method 属性规定表单数据的提交方法。可以指定为 "post" 或 "get"。使用 "post" 方式表单数据会作为 HTTP 请求的实体提交，相对安全，适用于文件上传等需要保密的提交。使用 "get" 方式表单数据以查询字符串形式附加在 URL 后面，适用于数据量小的请求。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

input 标签的 type 属性

input 标签可以用来创建多种表单元素，如文本框、密码框、单选框等等，其中 type 属性可设置为 "file" 表示文件上传元素。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

后端接收和处理文件

当用户选择文件并点击 "上传" 按钮时，表单数据将被提交到服务器，服务器需要接收并处理数据。后端处理方式因语言和框架而异，以下是 PHP 的示例代码：

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
  echo "文件已上传";
} else {
  echo "上传失败";
}
?>

解释：

• $target_dir 定义存储文件目录
• $target_file 定义存储文件的路径和名称，basename() 函数获取文件名称
• move_uploaded_file() 函数将临时文件移动到指定位置
• 当上传成功时输出 "文件已上传"，失败时输出 "上传失败"

总结

本文介绍了 HTML 表单 enctype、method 和 input 标签的 file 类型，以及后端 PHP 接收和处理文件的示例代码。从 HTML 前端到 PHP 后端的实现过程，可以更好的加深对文件上传的理解。