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

Question

我正在尝试制作一个 JavaScript 多图像 uploader ，将图像预览上传到 slider ，但我遇到了一些问题。到目前为止，我似乎能够将图像上传到 slider 中，但问题似乎出在我的 i 变量上 - 当我尝试增加它时，它保持不变，不允许我的 next 和 previous slider 箭头无法正常工作。如果有人知道如何使此 slider 正常工作，我将不胜感激。

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 here

---

现在，这个数组也可以用于确定第一个/最后一个元素，从而使用它从最后一个元素到第一个元素。因为我们无法确定事件监听器何时执行(假设有 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。我们需要修正的元素是last的next和first的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 将类似于 this .