</body>
<input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
<canvas id="myCanvas" width=1440 height=900></canvas>
<script type="text/javascript">
// 读取文件夹并回显
var imgPosX = 0;
var imgWidth = 256;
function dealSelectFiles() {
/// get select files.
var selectFiles = document.getElementById("selectFiles").files;
for (var file of selectFiles) {
console.log(file.webkitRelativePath);
/// read file content.
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
/// deal data.
var img = new Image();
/// after loader, result storage the file content result.
img.src = this.result;
img.onload = function () {
var myCanvas = document.getElementById("myCanvas");
var cxt = myCanvas.getContext('2d');
cxt.drawImage(img, imgPosX, 0);
imgPosX += imgWidth;
}
}
}
}
</script>
</html>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<script>
// 加载图片并并回显
function previewFile() {
// Where you will display your image
var preview = document.querySelector('img');
// The button where the user chooses the local image to display
var file = document.querySelector('input[type=file]').files[0];
// FileReader instance
var reader = new FileReader();
// When the image is loaded we will set it as source of
// our img tag
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
// Load image as a base64 encoded URI
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</body>