Slider FileReader JS多重图像上传（增量索引） [英] Slider FileReader JS Multiple Image Upload (Incrementing Index)

问题描述

我想让一个JavaScript多图片上传器将图片预览上传到滑块，但我遇到了一些问题。到目前为止，它看起来像我能够得到的图像上传到滑块，但问题似乎发生在我的 i 变量 - 当我尝试增量，它保持不变，不允许我的下一个和上一个滑块箭头工作。如果有人知道如何让这个滑块工作正常，我非常感谢您的帮助。

JS代码：

  $（'#_ uploadImages'）。click（function（）{
 $（'#_ imagesInput'）。click（）
}）
 
 $（'#_ imagesInput'）。on（'change'，function（）{
 handleFileSelect（）; 
}）; 
 
 function handleFileSelect（）{
 //检查文件API支持
 if（window.File&& amp; 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]; 
 
 //只有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 =prevhref =＃slide-'+ prev_i +'>& larr;< / a>'+'< a class =nexthref =＃slide - '+ next_i +'>& rarr;< / a>'+'< / nav>'+'< li> // TODO：Enter Title 
}）; 
 //读取图像
 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>< a href =＃slide-3>< / a>< / li>'+'< / ul>'+'< / li>'
} else {
 console.log（您的浏览器不支持File API）; 
} 
} 
  

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

解决方案

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

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

  var arrFilesCount = []; 
 
 for（var i = 0; i< files.length; i ++）{
 arrFilesCount.push（i）; // push to array 
 
 var file = files [i]; 
 
 //只有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使用i 
 prev_i = current_i  -  1; 
 next_i = current_i + 1; 
 ... 
 ... 
  pre> 
 
 
相应的jsFiddle 这里 
 
 
 
 
 
 
现在，此数组也可用于确定第一个/最后一个元素，从而使用它从最后一个因为我们无法确定事件监听器将何时执行（例如，如果有100个图像，第一个事件监听器可以在循环计数达到5或10时执行），所以我使用了两个循环，而不是一个。第一个循环只是为了填充数组。
  var arrFilesCount = []; 
 for（var i = 0; i < files.length; i ++）{
 arrFilesCount.push（i）; 
} 
  
 
 $ b b 
使用它来查找第一个和最后一个元素
  current_i = arrFilesCount.shift 
 if（current_i === 0）{
 prev_i = files.length  -  1; //这是第一个元素。上一张幻灯片将是最后一张图像。 （i = length-1）
} 
 else {
 prev_i = current_i  -  1; 
} 
 if（arrFilesCount.length === 0）{
 next_i = 0; //这是最后一个元素。下一张幻灯片将是第一个图像（i = 0）
} 
 else {
 next_i = current_i + 1; 
} 
  
请参阅 jsFiddle 。
 
 
 
 
 
 
最后，其中用户首先添加几个图像，然后再次点击上传按钮并且添加几个图像。在这种情况下，我们需要更正现有的href。我们需要纠正的元素是 next 的第一个和 prev 的第一个。这可以使用：
  var start = $（output）.find（'li'）。 
 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 。
 
I am trying to make a JavaScript multiple image uploader that uploads image previews to a slider, but I am having some issues. So far it looks like I was able to get the images to upload into the slider, but the problem seems to happen with my i variable - when I try to increment it, it stays the same, not allowing my next and previous slider arrows from working. If anyone knows how to get this slider working properly, I would appreciate the help.

JS Code:
$('#_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/

解决方案
The problem with the code is that by the time the load event executes - the for loop has already incremented. So if two images are added - the value of i when the load event is executing is already 2.

One way to solve this is to add the value of i to an array and retrieve it in the event listener one by one:
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;
        ...
        ...
Corresponding jsFiddle here



Now, this array can also be used for determining the first/last element and thereby using this to go from last to first element. Because we cannot be sure when the event listener will execute (say if there are 100 images the first event listener may execute when the count of loop has reached 5 or 10), so I've used two loops instead of one. The first loop just to populate the array.
var arrFilesCount = [];
for (var i = 0; i < files.length; i++) {
     arrFilesCount.push(i);
}
Lets use this to find the first and last elements
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;
}
See this jsFiddle.



Finally, there can be scenarios where the user first adds a couple of images then clicks on upload button again and adds a couple of more images. In this case we need to correct the existing href. The elements which we need to correct are the next of last and prev of first. This can be done using:
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);
}
So the final jsFiddle will be something like this.

                        
这篇关于Slider FileReader JS多重图像上传（增量索引）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！