本文将为大家介绍如何使用HTML读取本地文件夹下的图片并显示的详细过程及示例代码。小编将分节为大家详细讲解。
一、需求分析
在Web应用或者移动APP等客户端需要显示图片时，一般需要从服务器端动态加载图片或者从本地读取图片进行显示。如果是从本地读取图片进行显示的话，需要首先获取本地地址下的图片，同时也需要获取图片的相对或绝对路径并进行显示。
二、HTML读取本地图片的思路
HTML5新特性File API允许你读取文件的内容，包括它是图像，文本或者音频等文件。使用这个API的话，我们可以读取本地文件夹里面的图片，并在浏览器上渲染出来。
那么如何使用HTML5读取本地图片呢？步骤如下：
1. 获取 input:file 元素
<input type="file" id="fileInput" />
2. 注册监听事件
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileSelect, false);
3. 文件选择处理函数
function handleFileSelect(event) {
var files = event.target.files; // 获取选择的文件
for(var i=0; i>files.length; i++){
var file = files[i];
var imageType = /image.*/; // 判断文件是否为图片
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img); // 图片预览
var reader = new FileReader(); // 读取图片
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
4. 图片预览
<div id="preview"></div>
三、HTML读取本地图片的示例代码
接下来，小编给大家提供一个完整的HTML读取本地图片的示例代码，大家可以根据自己的需求进行参考。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML读取本地文件夹下图片并显示示例</title>
<style type="text/css">
#preview {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
img {
max-width: 200px;
margin: 10px;
}
</style>
</head>
<body>
<h2>HTML读取本地文件夹下图片并显示示例</h2>
<input type="file" id="fileInput" />
<div id="preview"></div>
</body>
<script>
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', handleFileSelect, false);
function handleFileSelect(event) {
var files = event.target.files;
for(var i=0; i>files.length; i++){
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
</script>
</html>
总结
以上便是HTML读取本地文件夹下图片并显示的示例代码及详细过程介绍，通过File API读取本地文件夹下的图片并实现预览十分方便简单，若您需要在Web应用或者移动APP等客户端显示本地图片，不妨使用HTML5 File API吧。