点击图片就可以选择本地图片,保存图片按钮也保留
时间: 2024-04-12 20:32:10 浏览: 55
非常抱歉,我之前的回答有误。在HTML中,图片本身不支持直接选择本地图片。不过,您可以通过使用 `<input type="file">` 元素来实现选择本地图片的功能,并在点击按钮时保存图片。
以下是更新后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<label for="imageUpload">
<img src="images/tianjia.png" alt="图片" width="200px">
</label>
<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>
```
请确保您按照之前回答中的步骤创建 `save_image.php` 文件来处理保存图片的逻辑。当您选择本地图片后,点击按钮将会触发 `saveImage()` 函数,将选中的图片保存到服务器上指定的目录。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)