如何使用javascript或Nodejs读取目录中的所有文件?

项目简介 – 我真的很恼火的低劣的Windows 10照片查看器,我已经卸载它使用PowerShell的。 现在我想创build我自己的imageviewer用户

  1. 点击桌面/电脑上的图像查看
  2. 然后使用箭头键浏览像旧的Windows图像查看器坐在同一目录中的图像的其余部分。 基本上,应用程序自动检测所有的文件…
  3. 我也想要附加所有的图像文件[ .jpg, .gif,*。png等….]与此应用程序打开。

编辑 – >

编辑说明

在这里,我发现了一些代码片段,并尝试修改它,但没有按预期工作。 有人可以帮我吗? 我正在使用NWJS进行文件打开事件并提取选定文件的实际path。 然后,我使用fs模块获取所选文件的父目录,然后使用fs.readdir读取目录中的所有文件。 我根据指定的文件扩展名(如[* .jpg,* .png,* .gif,* .svg,* jpeg]

什么是不工作图像没有这样显示,我不知道如何进一步移动。 我想nodejs是给文件的完整path,但我想我们不能使用绝对path来追加图像? 是这样吗? 如果是,那么围绕这个方法的工作是什么?

**HTML CODE** <input style="display:none;" id="fileDialog" type="file" /> <button id="loadButton" type="button" class="btn btn-success" onclick="showTheFile()">Load</button> <div class="output"></div> **JS CODE** <script> var fs = require('fs'); var path = require('path'); var parentDir = ''; var chooser = document.querySelector("#fileDialog"); // Set up the file chooser for the on change event chooser.addEventListener("change", function(evt) { var filename = this.value; parentDir = path.dirname(filename); console.log(parentDir); var filearray = allfiles(parentDir); console.log(filearray); for (var i = 0; i < filearray.length; i++) { var preview = $('<img>', { src: 'C:/Users/BLACK/Downloads/05-Newton-Principia-Kronecker-Wallis-Book.jpg', id: "index_" + filearray[i].indexof }); $('.output').append(preview); } }, false); function showTheFile() { chooser.click(); } function allfiles(thisFolder) { var allimage = []; fs.readdir(thisFolder, (err, files) => { files.forEach((file, index) => { var ext = path.extname(file); //console.log(ext); if (ext == '.jpg' || ext == '.png' || ext == '.jpeg' || ext == '.gif' || ext == '.svg') { var finalpath = parentDir.replace(/\\/g, "/") + "/" + file; var fileObject = { path: finalpath, indexof: index, fileName: file } allimage.push(fileObject); } }); }); // console.log(allimage); return allimage; } </script> 

我所研究的

  1. Javascript – 加载一张图片时,无法自动从客户端PC上访问所有图片。
  2. HTML5的文件API – 它看起来很有前途,但我累这个我不知道如何继续[ 请参阅代码段#1 ] 问题是我不知道如何浏览button上的目录单击并提取其中的文件。 代码片段#2确实给出了文件的相对path,但是当我将这些path附加到一个img标签时,它什么也不做。
  3. NodeJS FS阅读器 – 是的,但它必须在app.js中对目录path进行硬编码。 有没有办法使这个硬编码pathdynamic使用其他nodejs模块或任何东西。 请参阅代码段#3,它显示了来自给定目录的内容,但如何将此硬编码path更改为dynamic目录?

要么

根本不可能使用任何forms的networking技术。

代码片段#1

 function toArray(list) { return Array.prototype.slice.call(list || [], 0); } function listResults(entries) { // Document fragments can improve performance since they're only appended // to the DOM once. Only one browser reflow occurs. var fragment = document.createDocumentFragment(); entries.forEach(function(entry, i) { var img = entry.isDirectory ? '<img src="folder-icon.gif">' : '<img src="file-icon.gif">'; var li = document.createElement('li'); li.innerHTML = [img, '<span>', entry.name, '</span>'].join(''); fragment.appendChild(li); }); document.querySelector('#filelist').appendChild(fragment); } function onInitFs(fs) { var dirReader = fs.root.createReader(); var entries = []; // Call the reader.readEntries() until no more results are returned. var readEntries = function() { dirReader.readEntries(function(results) { if (!results.length) { listResults(entries.sort()); } else { entries = entries.concat(toArray(results)); readEntries(); } }, errorHandler); }; readEntries(); // Start reading dirs. } window.requestFileSystem(window.TEMPORARY, 1024 * 1024, onInitFs, errorHandler); 

代码段#2

  var input = document.getElementById('files'); var output = document.getElementById('output'); var pathArray = []; input.onchange = function(e) { var files = e.target.files; // FileList for (var i = 0, f; f = files[i]; ++i) { console.debug(files[i].webkitRelativePath); pathArray.push(files[i].webkitRelativePath); output.innerText = output.innerText + files[i].webkitRelativePath + "\n"; } } 

代码片段#3

 var fs = require('fs'); if (process.argv.length <= 2) { console.log("Usage: " + __filename + " path/to/directory"); process.exit(-1); } var path = process.argv[2]; fs.readdir(path, function(err, items) { console.log(items); for (var i=0; i<items.length; i++) { console.log(items[i]); } }); 

代码段#4 – >这工作正常,但仍然可以使它,以便当用户上传一个图像时,它会自动上传该目录中的每一个图像…

 HTML ----- <input type="file" id="files" name="files[]" multiple webkitdirectory /> JS--------------- var input = document.getElementById('files'); var output = document.getElementById('output'); input.onchange = function(e) { var files = e.target.files; // FileList for (var i = 0, f; f = files[i]; ++i) { previewImage(this.files[i]); } } function previewImage(file) { var galleryId = "myImages"; var gallery = document.getElementById(galleryId); var imageType = /image.*/; if (!file.type.match(imageType)) { throw "File Type must be an image"; } var thumb = document.createElement("div"); thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div var img = document.createElement("img"); img.file = file; thumb.appendChild(img); gallery.appendChild(thumb); // Using FileReader to display the image content var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); }