js读取本地图片并显示
时间: 2023-08-04 09:07:13 浏览: 55
你可以使用HTML5中的File API来读取本地图片,然后使用JavaScript将其显示在页面上。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取本地图片并显示</title>
</head>
<body>
<input type="file" onchange="loadImage(event)">
<br>
<img id="image" width="300">
<script>
function loadImage(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event) {
var img = document.getElementById("image");
img.src = event.target.result;
}
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个`<input>`元素,它允许用户选择本地图片文件。当用户选择文件后,`onchange`事件会触发`loadImage()`函数。在`loadImage()`函数中,我们使用`FileReader`对象来读取文件并将其转换为Data URL格式。最后,我们将Data URL设置为`<img>`元素的`src`属性,从而将图片显示在页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)