我需要使用 html 和 JavaScript 制作小型应用程序来搜索给定文件夹中的图像。
例如我有一个名为 /images 的文件夹与 f1.jpg, f2.gif, f3.png带有搜索输入的图像和 html 网页。当我搜索f1时它应该打印 f1.jpg图像 <img>搜索输入下方的标签。
我如何使用 html 和 javascript 或 ajax 来做到这一点而不打印所有图像？
Html 示例代码:
<!doctype html>
<html>
<head>
<title>Search images</title>
<script type="text/javascript">
var folder = "images/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
</script>
</head>
<body>
<form>
<label>Search for image:</label>
<br />
<input type="text" name="search" placeholder="">
<button type="submit">Search</button>
<br />
<!-- Image result should appear here -->
</form>
</body>
</html>
最佳答案
为此您不需要ajax。您可以使用 Image 的 onload 事件查看图像是否已加载，如下所示
var img = new Image();
img.src = path_to_image;
img.onerror = function() {
// any logic in case of error
};
img.onload = function() {
document.body.appendChild(img);
};
你可以看一下这个例子 https://plnkr.co/edit/RWH73qp0jmOZeymvV6Aq?p=preview
注意:您可以使用 predefined_path_to_folder + search_input_value 创建图像网址，并将其用作 img.src
关于javascript - 使用 JavaScript 和 ajax 在给定文件夹中搜索图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36296522/