PHP环境已经搭建好了,现在做一个HTML 页面,页面编码是UTF-8,页面中有一张图片和一个按钮,图片大小是200px,图片路径为images中的tianjia.png,点击图片可以选择本地图片、按钮和图片同时存在,点击按钮,把图片存储到taskimg目录
时间: 2024-04-14 10:30:36 浏览: 13
您可以按照以下步骤创建一个包含图片和按钮的HTML页面,并在点击按钮时将图片保存到指定目录:
1. 创建一个新的HTML文件,比如 `index.html`,并确保文件编码设置为UTF-8。
2. 在HTML文件中添加以下代码来创建图片和按钮:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="images/tianjia.png" alt="图片" width="200px">
<br>
<input type="file" id="imageUpload" accept="image/*">
<button onclick="saveImage()">保存图片</button>
<script>
function saveImage() {
var imageInput = document.getElementById('imageUpload');
var file = imageInput.files[0];
var formData = new FormData();
formData.append('image', file);
// 发送POST请求将图片保存到服务器
var request = new XMLHttpRequest();
request.open('POST', 'save_image.php');
request.send(formData);
}
</script>
</body>
</html>
```
3. 将该HTML文件与 `tianjia.png` 图片放在同一个目录下。
4. 创建一个名为 `save_image.php` 的PHP文件来处理保存图片的逻辑。在 `save_image.php` 文件中添加以下代码:
```php
<?php
if ($_FILES["image"]["error"] == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["image"]["tmp_name"];
$name = $_FILES["image"]["name"];
move_uploaded_file($tmp_name, "taskimg/" . $name);
}
?>
```
5. 确保 `taskimg` 目录存在,并具有写入权限。
现在,当您在HTML页面中选择本地图片并点击按钮时,选择的图片将会被上传并保存到 `taskimg` 目录中。