Question

我想访问特定路径中的文件名。单独编写的JavaScript代码可以正常工作，而将其放在HTML内时，该代码将无法正常工作。

fs = require('fs');
var directory = 'IPIE/';//direcory name(path name)

fs.readdir(directory, (err, files)=> {
   for (index in files) {
      console.log(files[index]);
   }
});

此代码给出输出，即文件夹名称如下：

BigBubbles
Edgegap
Sticky

以下html代码无法正常工作

<html>
   <body>
      <label>Input Option:</label>
      <select id="input_mode"></select>
      <button onclick='displayfiles()'>abc</button>
   </body>    

   <script>
      function displayfiles() {
         var fs = require('fs');
         var directory = 'IPIE/'; //folder name

         fs.readdir(directory, (err, files) => {
            var select = document.getElementById("input_mode");
            for (index in files) {
               select.options[select.options.length] = new Option(files[index], index);
            }
         });
      }
   </script>
</html>

我注意到在var fs = require('fs');行之后，alert("something")不起作用，这意味着执行在该行停止。请帮助

Answer 1

要输出文件列表，必须设置Web服务器，在服务器端获取文件列表，然后输出到浏览器。执行并访问http://localhost/

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/html'
    });

    var fileSelectHtml = getFileSelectHtml();
    res.end(`
            <html>
                <body>
                    <label>Input Option:</label>
                    ${fileSelectHtml}
                </body>
            </html>
            `); 

}).listen(80);

function getFileSelectHtml() {
    var files = fs.readdirSync('IPIE/');

    var selectHtml = '<select id="input_mode">';
    for (index in files) {
       selectHtml += '<option>'+ files[index] +'</option>';
    }
    selectHtml += '</select>';
    return selectHtml;
}

HTML脚本标记内的JavaScript代码不起作用

1 个答案: