JS+HTML点击修改图片代码
时间: 2023-06-20 15:09:14 浏览: 45
以下是一个简单的示例代码,您可以参考:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击修改图片</title>
<script src="script.js"></script>
</head>
<body>
<h2>点击图片进行修改</h2>
<img id="myImg" src="default.jpg" alt="默认图片">
</body>
</html>
```
JavaScript代码:
```javascript
var myImg = document.getElementById("myImg");
myImg.onclick = function() {
var file = document.createElement("input");
file.type = "file";
file.accept = "image/*";
file.onchange = function() {
var reader = new FileReader();
reader.onload = function(e) {
myImg.src = e.target.result;
};
reader.readAsDataURL(file.files[0]);
};
file.click();
};
```
这段代码会在图片被点击时,弹出一个文件选择框供用户选择新的图片。当用户选择了新的图片后,会将该图片显示在页面上。注意,这段代码只是一个简单的示例,如果您需要在实际项目中使用,请根据具体需求进行修改和完善。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)