gpt4 book ai didi

javascript - html 文件找不到上传目录

转载 作者:行者123 更新时间:2023-12-03 05:11:33 26 4
gpt4 key购买 nike

我有一个 html 文件,应该显示上传目录中的每张图片,但它无法识别上传目录。我正在使用 Node.js 服务器。这是我的 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

提前致谢!

最佳答案

查看示例代码,HTML 文件似乎需要从 http://localhost:3000/uploads 返回一些 HTML .

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

这个问题的答案在于 Node.js 应用程序中的 ma​​in 可执行 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

关于javascript - html 文件找不到上传目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41797167/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com