不需要选择按钮,点击图片就可以上传并显示图片
时间: 2024-04-19 22:26:11 浏览: 15
<!DOCTYPE html>
<html>
<head>
<title>图片页面</title>
<style>
#image-preview {
display: none;
max-width: 500px;
max-height: 500px;
}
</style>
<script>
function uploadImage(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function() {
var img = document.getElementById('image-preview');
img.src = reader.result;
img.style.display = 'block';
};
reader.readAsDataURL(file);
}
function clickImage() {
var input = document.getElementById('image-input');
input.click();
}
</script>
</head>
<body>
<img id="image-preview" alt="图片预览" onclick="clickImage()">
<input type="file" id="image-input" accept="image/*" style="display: none" onchange="uploadImage(event)">
</body>
</html>
以上是修改后的代码,现在只需要点击图片即可上传并显示图片。通过将`input`标签隐藏,并添加一个点击事件`onclick="clickImage()"`到`img`标签上,当点击图片时会触发点击事件,然后再通过调用`input.click()`来触发选择文件的操作。选择文件后,会触发`onchange`事件,并调用`uploadImage(event)`函数来上传并显示图片。
相关推荐
![](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)