使用Javascript从文件加载图像 [英] Loading images from file with Javascript
问题描述
我正在尝试使用HTML内的JS在页面加载时加载文件夹(我有20K以上)中的所有图像，以将其显示给用户(只是试图构建一个到处都包含图像的页面) .但是我无法加载图像. Web控制台上也没有错误.
I'm trying to load all the images inside a folder(I have more than 20K), to show them to users(just trying to build a page with images everywhere), on page load, using a JS inside my HTML. But I couldn't manage to load images. There is no error on web console also.
此代码有什么问题?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script>
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>
</body>
</html>
同样，其他不使用JS来实现相同目的的解决方案也受到赞赏.
Also, other solutions without JS to achieve the same thing appreciated as well.
谢谢.
推荐答案
先决条件:调整Chrome/chrome启动器以添加所需的标志，例如； chromium-browser --allow-file-access-from-files或google-chromne --allow-file-access-from-files;参见如何执行我将Google Chrome浏览器的标志"--allow-file-access-from-files"永久化吗?
Prerequisite: Adjust chromium / chrome launcher to add required flag , e.g.; chromium-browser --allow-file-access-from-files or google-chromne --allow-file-access-from-files ; see How do I make the Google Chrome flag "--allow-file-access-from-files" permanent?
html，img个元素的数量等于文件夹中的图像文件
html, having number of img elements equal to image files in folder
<!-- note , `src` attribute not included -->
<img class="image" style="opacity:0.0" alt="1">
<img class="image" style="opacity:0.0" alt="1a">
<img class="image" style="opacity:0.0" alt="1b">
<img class="image" style="opacity:0.0" alt="1c">
然后，您应该能够使用以HTML格式预加载图像中所述的方法进行迭代一组图像文件名，以连续加载多个图像.
You should then be able to use approach described at Preloading images in HTML to iterate an array of image file names to load multiple images in succession.
使用XMLHttpRequest()并将responseType设置为Blob，URL.createObjectURL，new Promise()构造函数，Promise.all()
Using XMLHttpRequest() with responseType set to Blob , URL.createObjectURL , new Promise() constructor , Promise.all()
var arr = ["file:///home/user/path/to/image/file-1"
, "file:///home/user/path/to/image/file-2"];
function loadImages(src) {
return new Promise(function(resolve, reject) {
var request = new XMLHttpRequest();
request.onload = function() {
$("<img/>", {
src: URL.createObjectURL(this.response)
}).on("error", reject)
.appendTo("body");
resolve(src + " loaded")
}
request.onerror = reject;
request.open("GET", src);
request.responseType = "blob";
request.send();
})
}
Promise.all(arr.map(function(src) {
return loadImages(src)
}))
.then(function(data) {
console.log(data)
}, function(err) {
console.log("error", err)
})
另请参见 jquery-ajax-native ，它允许Blob或jQuery.ajax()
See also jquery-ajax-native which allows Blob or ArrayBuffer to be returned from jQuery.ajax()
$.ajax({
dataType: 'native',
url: "file:///home/user/path/to/image/file",
xhrFields: {
responseType: "blob"
}
})
.then(function(data) {
$("<img/>").attr("src", URL.createObjectURL(data))
.appendTo("body")
})
这篇关于使用Javascript从文件加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
