Javascript Slider FileReader JS多图像上传（递增索引）

我试图制作一个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");
    }
}

$（'uUploadImages'）。单击（函数（）{
$（'#_imagesInput'）。单击（）
})
$（'#_imagesInput'）。on（'change'，function（）{
handleFileSelect（）；
});
函数handleFileSelect（）{
//检查文件API支持
if（window.File&&window.FileList&&window.FileReader）{
var files=event.target.files；//文件列表对象
var输出=document.getElementById（“帧”）；
对于（var i=0；i++++++++++++++++++'
；//TODO:输入标题
});
//阅读图片
picReader.readAsDataURL（文件）；
}
//output.innerHTML=output.innerHTML++'
'+'
'+'
'+'
'+'
'+'
'+''+'
'
}否则{
log（“您的浏览器不支持文件API”）；
}
}

JSFiddle：

---

代码的问题在于，在load事件执行时，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;
        ...
        ...

看这个

---

最后，可能会出现这样的场景：用户首先添加两个图像，然后再次单击“上载”按钮并添加更多图像。在这种情况下，我们需要更正现有的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);
}

因此，最后一个JSFIDLE将类似于。

将

.append（）

替换为

.innerHTML

；创建变量

idx

以增加

。幻灯片li

元素

id

s；将委托

单击
事件添加到
导航a
元素；添加了
.bind（）
，将
设置为
picReader
，
i
作为参数传递给
picReader
onload
事件；在
img
元素的
title
属性中添加
file.name
；添加了“点”导航，在
#框架下显示图像的缩略图<代码>标题
到箭头导航


varidx=-1，re=/（.*）（？=\）/；
$（'#(u uploadImages'）。单击（函数（）{
$（'#_imagesInput'）。单击（）；
});
$（'.#_imagesInput'）。在（'change'，函数（事件）上{
handleFileSelect（事件）；
});
$（文档）.on（“单击“，”.slider.slide导航a，.nav a”，函数（e）{
e、 预防默认值（）；
$（“.slide”）.hide（）
.filter（“：has（img[title^=“+e.target.title.match（re）[0]+“]）”）”.show（）；
});
函数handleFileSelect（事件）{
//检查文件API支持
if（window.File&&window.FileList&&window.FileReader）{
var files=event.target.files；//文件列表对象
var输出=document.getElementById（“帧”）；
对于（var i=0；i”
+ "" 
+ '' 
+“&larr；”
+“&rarr；”
+ '' 
+“”）；
//为“导航a”元素添加标题
如果（file.name==files[files.length-1].name）{
$（“.nav”）.empty（）；
美元（“资产净值”）。每个（功能（i、el）{
如果（$（el）.closest（“[id^=幻灯片]”）.prev（“[id^=幻灯片]”）。长度
&&$（el.is（“资产净值：第n种类型（1）”）{
$（el）.attr（“标题”，
$（el）.最近（“[id^=幻灯片]”）
.prev（“[id^=slide]”）。查找（“img”）.attr（“标题”）
)
}
如果（$（el）.最近（“[id^=slide]”）。下一个（[id^=slide]”）。长度
&&$（el.is（“资产净值：第n种类型（2）”）{
$（el）.attr（“标题”，
$（el）.最近（“[id^=幻灯片]”）
.next（“[id^=slide]”）。查找（“img”）.attr（“标题”）
)
}
if（$（el）.is（“.slider[id^=slide]：first a:first”））{
$（el）.attr（“标题”，
$（“[id^=slide]：last”）.find（“img”）.attr（“title”）
)
}
如果（$（el）.is（“.slider[id^=slide]：最后一个a:l
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;
}

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);
}