html文件无法找到上传目录

我有一个html文件应该显示上传目录中的每张图片，但它不能识别上传目录。我正在使用一个nodejs服务器。这里是我的html文件：html文件无法找到上传目录

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>gummy bear</title> 
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link href="css/styles.css" rel="stylesheet"> 
</head> 
<body> 

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
    <script> 
    var dir = "/uploads/"; 
    var fileextension = ".jpg"; 
    $.ajax({ 
     url: dir, 
     success: function (data) { 
      $(data).find("a:contains(" + fileextension + ")").each(function() { 
       var filename = this.href.replace(window.location.host, "").replace("http://", ""); 
       $("body").append("<img src='" + dir + filename + "'>"); 
      }); 
     } 
    }); 
    </script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</body> 
</html>

，这里是我的目录结构是什么样子：

app.js css index.html javascripts LICENSE node_modules package.json README.md upload.html uploads

和上传的里面是：提前

➜ uploads ls 
1.jpg

谢谢！

来源

2017-01-22 pudility

我不知道，但Node.js的，我不认为你可以发送一个请求到一个目录。必须有一个脚本返回这些文件。 Theres在node.js中的'fs'模块 – pixelarbeit

当你在浏览器中自己打开该URL时会发生什么？ – charlietfl

对不起，我不明白，什么网址？ – pudility

翻阅示例代码，它看起来像HTML文件希望从http://localhost:3000/uploads返回一些HTML。

问题是为什么/uploads端点不返回任何内容，而是返回404响应？

对此的回答将位于node.js应用程序中的主要可执行JavaScript文件中。可能有一个名为server.js或index.js的文件。

这里是你将如何去创造适合你的正确的Node.js应用程序的示例HTML文件的工作：

server.js

app.all('/uploads', function (req, res) { 
    var folder = './public/uploads', 
     html = '<html><body>##files##</body></html>'; 

    fs.readdir(folder, (err, files) => { 
     var fileHrefs = ''; 

     files.forEach(function (file) { 
      fileHrefs += '<a href="http://localhost:3000/uploads/' + file + '">' + file + '</a>'; 
     }); 

     html = html.replace('##files##', fileHrefs); 

     res.send(err || html); 
    }) 
});

的代码遍历这个片断就可以在上传目录中的所有文件并将其包装在a标签中，然后由服务器返回。

的index.html

为了让你的索引HTML文件的工作作出了几个小的变化需要：

变化$(data).find()到$(data).filter()
从图像源中删除的目录。改变<img src='" + dir + filename + "'>到<img src='" + filename + "'>

完整的工作样本

你也可以在这里找到整个工作样本：https://github.com/kohlikohl/list-images-in-dir

来源

2017-01-23 01:02:21

非常感谢！这是人们给我的最好答案。非常感谢你的帮助！ – pudility

html文件无法找到上传目录

回答

相关问题