html上传图片并显示图片
时间: 2024-06-09 22:03:11 浏览: 15
HTML 通过 `<input>` 标签的 `type` 属性设置为 `file` 实现文件上传功能,而通过 `<img>` 标签可以显示图片。下面是一个简单的示例:
```
<!DOCTYPE html>
<html>
<head>
<title>上传图片并显示图片</title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*">
<input type="submit" value="上传">
</form>
<?php
if(isset($_FILES['image'])) {
$image = $_FILES['image'];
if($image['error'] == 0) {
move_uploaded_file($image['tmp_name'], 'uploads/' . $image['name']);
echo '<img src="uploads/' . $image['name'] . '">';
}
}
?>
</body>
</html>
```
在表单中添加一个文件输入框,将其 `type` 属性设置为 `file`,并将 `name` 属性设置为 `image`。同时,设置 `enctype` 属性为 `multipart/form-data`,这样表单才能传输文件。当用户选择文件并提交表单后,PHP 脚本会处理上传的文件,并将其保存到指定的目录下。此外,我们使用 `<img>` 标签来显示上传的图片,将其 `src` 属性设置为上传后保存的图片路径即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)