Question

我正在尝试使用具有以下功能的函数。一个函数将输入的文件存储到父函数loadedimages数组（loadimages）中。一个函数用于在正确的组件中显示这些文件（showLoadedImages）。并且有一个函数可以使正确的img文件出现在正确的组件上。最后一个功能就是我想要的样子（它不起作用）。其他两个似乎没问题。我遇到的问题是如何在使用loadedimages数组时使最后一个函数工作。您可以更改我在数组中存储的内容，我不介意。

这是JS代码：

function imgviewer() {
    "use strict";
    var loadedimages = [];
    var lidivs = [];

    function loadimages() {
        var files = document.getElementById("images").files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
                alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
                break;
            }
            loadedimages.push(file);
        }
    }

    function showLoadedImages(elem) {
        loadimages();
        var ld = loadedimages;

        //var files = getLoadedImages(); //filelist obj
        for (var i = 0; i < ld.length; i++) {
            var file = ld[i];
            var reader = new FileReader();
            reader.onload = (function(file) {
                return function(e) {
                    // Render thumbnail.
                    var span = document.createElement(
                        'span');
                    span.innerHTML = [
                        '<img class="tile" src="',
                        e.target.result,
                        '" title="', encodeURI(
                            file.name), '">'
                    ].join('');
                    document.getElementById(elem).insertBefore(
                        span, null);
                    lidivs.push(span);
                };
            })(file);
            // Read in the image file as a data URL.
            reader.readAsDataURL(file);
        }
    }

    function showImage(index, elem) {
        var chosenFile = loadedimages[index];
        document.getElementById(elem).src = chosenFile;
    }
document.getElementById('images').addEventListener('change', function(){
    showLoadedImages("main");
    }, false);
}

还有一些HTML

<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory      name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg"   width="1200" height="832" alt=""/></div>
<div id="main"></div>

当我调用showLoadedImages（＆＃34; main＆＃34;）时，图像显示在主div中。我希望能够点击这些图像，以便它们出现在＆＃34; willchange＆＃34;

Answer 1

这就是你所要求的。您的代码还有许多其他问题需要解决，从图像开始根本不是缩略图（缩小的图像与原始图像的加载时间一样长），但也许我遗漏了一些东西。 / p>

"use strict";
var loadedimages = [];
var lidivs = [];

function loadimages() {
	var files = document.getElementById("images").files;
	for (var i = 0; i < files.length; i++) {
		var file = files[i];
		if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
			continue;
		}
		loadedimages.push(file);
	}
    loadedimages.length || alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
}

function showLoadedImages(elem) {
	loadimages();
	var ld = loadedimages;

	//var files = getLoadedImages(); //filelist obj
	for (var i = 0; i < ld.length; i++) {
		var file = ld[i];
		var reader = new FileReader();
		reader.onload = (function(file) {
			return function(e) {
				// Render thumbnail.
				var span = document.createElement(
					'span');
				span.innerHTML = [
					'<img data-index="',
					lidivs.length,
					'" class="tile" src="',
					e.target.result,
					'" title="', encodeURI(
						file.name), '">'
				].join('');
				span.addEventListener("click", foo );
				document.getElementById(elem).insertBefore(
					span, null);
				lidivs.push(span);
			};
		})(file);
		// Read in the image file as a data URL.
		reader.readAsDataURL(file);
	}
}

function showImage(index, elem) {
	document.getElementById(elem).src = lidivs[index].children[0].src;
}

function foo(event) {
  showImage(event.target.dataset.index, "willchange");
}

function show() {
    showLoadedImages("list");
}

function init() {
	document.getElementById("images").addEventListener("change", show, false);
}

document.addEventListener( "DOMContentLoaded", init, false );

<body>
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory      name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg"   width="1200" height="832" alt=""/></div>
</body>

如何从目录加载图像，然后显示onclick

1 个答案: