Slider FileReader JS多图像上传(递增索引)

Question

我正在尝试制作一个JavaScript多图像上传器,将图像预览上传到滑块,但我遇到了一些问题.到目前为止看起来我能够将图像上传到滑块,但问题似乎发生在我的i变量 - 当我尝试增加它时,它保持不变,不允许我next和previous滑块箭头工作.如果有人知道如何让这个滑块正常工作,我将不胜感激.

JS代码:

$('#_uploadImages').click(function() {
    $('#_imagesInput').click()
})

$('#_imagesInput').on('change', function() {
    handleFileSelect();
});

function handleFileSelect() {
    //Check File API support
    if (window.File && window.FileList && window.FileReader) {

        var files = event.target.files; //FileList object
        var output = document.getElementById("frames");

        for (var i = 0; i < files.length; i++) {
            var file = files[i];

            //Only pics
            if (!file.type.match('image')) continue;

            var picReader = new FileReader();
            picReader.addEventListener("load", function (event) {
                var picFile = event.target;

                console.log(event);

                current_i = i;
                prev_i = current_i - 1;
                next_i = current_i + 1;

                //var div = document.createElement("div");
                //div.innerHTML = div.innerHTML + "<img class='thumbnail' src='" + picFile.result + "'" + "title='" + picFile.name + "'/>";
                //output.insertBefore(div, null);

                ////output.innerHTML = output.innerHTML + "<img class='thumbnail' style='max-width:500px' src='" + picFile.result + "'" + "title=''/>";  // TODO: Enter Title
                output.innerHTML = output.innerHTML + '<li id="slide-' + current_i + '" class="slide">' + "<img src='" + picFile.result + "'" + "title=''/>" + '<nav>' + '<a class="prev" href="#slide-' + prev_i + '">&larr;</a>' + '<a class="next" href="#slide-' + next_i + '">&rarr;</a>' + '</nav>' + '<li>';  // TODO: Enter Title
            });
            //Read the image
            picReader.readAsDataURL(file);
        }
        //output.innerHTML = output.innerHTML + '<li class="quicknav">' + '<ul>' + '<li><a href="#slide-1"></a></li>' + '<li><a href="#slide-2"></a></li>' + '<li><a href="#slide-3"></a></li>' + '</ul>' + '</li>'
    } else {
        console.log("Your browser does not support File API");
    }
}

JSFiddle:http://jsfiddle.net/Hybridx24/yfr57u6w/

Answer 1

代码的问题在于，当加载事件执行时，for 循环已经递增。因此，如果添加两个图像 -i执行加载事件时的值已经是 2。

解决这个问题的一种方法是将 的值添加i到一个数组中，并在事件监听器中一一检索它：

var arrFilesCount = [];

for (var i = 0; i < files.length; i++) {
     arrFilesCount.push(i);   //push to array

     var file = files[i];

     //Only pics
     if (!file.type.match('image')) continue;

        var picReader = new FileReader();
        picReader.addEventListener("load", function (event) {
        var picFile = event.target;

        current_i = arrFilesCount.shift(); // get from array instead of using i
        prev_i = current_i - 1;
        next_i = current_i + 1;
        ...
        ...

对应的jsFiddle在这里

现在，该数组还可用于确定第一个/最后一个元素，从而使用它从最后一个元素转到第一个元素。因为我们无法确定事件侦听器何时执行（假设有 100 个图像，则当循环计数达到 5 或 10 时，第一个事件侦听器可能会执行），所以我使用了两个循环而不是一个。第一个循环只是为了填充数组。

var arrFilesCount = [];
for (var i = 0; i < files.length; i++) {
     arrFilesCount.push(i);
}

让我们用它来查找第一个和最后一个元素

current_i = arrFilesCount.shift();
if(current_i === 0){
    prev_i = files.length - 1;   //This is for the first element. The previous slide will be the last image. (i=length-1)
}
else{
    prev_i = current_i - 1;
}
if(arrFilesCount.length === 0){
    next_i = 0;     //This is for the last element. The next slide will be the first image (i=0)
}
else{
    next_i = current_i + 1;
}

请参阅这个jsFiddle。

最后，可能存在这样的情况：用户首先添加几个图像，然后再次单击上传按钮并添加更多图像。在这种情况下，我们需要更正现有的 href。我们需要纠正的元素是next最后一个和prev第一个。这可以使用以下方法完成：

var start = $(output).find('li').length;
var end = start+ files.length;

if(start !== 0){
    $(output).find('li > nav > a.prev').first().attr('href','#slide-' + (end-1));
    $(output).find('li > nav > a.next').last().attr('href','#slide-'+start);
}

所以最终的 jsFiddle 将是这样的。