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

Question

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

JS代码：

previous

  

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

Answer 1

代码的问题在于，当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;
        ...
        ...

对应的jsFiddle here

现在，这个数组也可用于确定第一个/最后一个元素，从而使用它来从最后一个元素到第一个元素。因为我们无法确定事件监听器何时会执行（例如，当循环计数达到5或10时，第一个事件监听器可能会执行100个映像），所以我使用了两个循环而不是一个循环。第一个循环只是为了填充数组。

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将类似于this。

Answer 2

为.append()取代.innerHTML;创建变量idx以增加.slide li个元素id;将委派的click事件添加到nav a元素;已添加.bind()，this设置为picReader，i作为参数传递给picReader onload个事件;已将file.name添加到title元素的img属性中;添加“点”导航，在#frames下方放置图像缩略图; title箭头导航

var idx = -1, re = /(.*)(?=\.)/;

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

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

    $(document).on("click", ".slider .slide nav a, .nav a", function(e) {
      e.preventDefault();
        $(".slide").hide()
        .filter(":has(img[title^="+e.target.title.match(re)[0]+"])").show();
    });

    function handleFileSelect(event) {
      //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];

          var picReader = new FileReader();
          picReader.onload = function(index, event) {
            ++idx;
            var picFile = event.target;
            var slides = $(".slider li[id^=slide]");
            // TODO: Enter Title
            $(output)
              .append('<li id="slide-' 
                + idx 
                + '" class="slide">' 
                + "<img src='" 
                + picFile.result
                // set `title`
                + "'title="
                //`index` : `i`
                + files[index].name 
                + "/>" 
                + '<nav>' 
                + '<a class="prev">&larr;</a>' 
                + '<a class="next">&rarr;</a>' 
                + '</nav>' 
                + '</li>');
            // add title to `nav a` elements
            if (file.name === files[files.length - 1].name) {
              $(".nav").empty();
              $("nav a").each(function(i, el) {
                if ($(el).closest("[id^=slide]").prev("[id^=slide]").length 
                    && $(el).is("nav a:nth-of-type(1)")) {
                      $(el).attr("title", 
                        $(el).closest("[id^=slide]")
                        .prev("[id^=slide]").find("img").attr("title")
                      )
                }

                if ($(el).closest("[id^=slide]").next("[id^=slide]").length 
                    && $(el).is("nav a:nth-of-type(2)")) {
                      $(el).attr("title", 
                        $(el).closest("[id^=slide]")
                        .next("[id^=slide]").find("img").attr("title")
                      )
                }

                if ($(el).is(".slider [id^=slide]:first a:first")) {
                  $(el).attr("title", 
                    $("[id^=slide]:last").find("img").attr("title")
                  )
                }

                if ($(el).is(".slider [id^=slide]:last a:last")) {
                  $(el).attr("title", 
                    $("[id^=slide]:first").find("img").attr("title")
                  )
                };
              });
              
              $(".slider img").each(function(i, el) {
                 $(".nav").append(
                   $("nav a[title^="
                     +$(el).attr("title").match(re)[0]
                     +"]:first")
                     .clone().html(el.outerHTML)
                 )
              })
            }
          }.bind(picReader, i);

          //Read the image
          picReader.readAsDataURL(file);
        };

      } else {
        console.log("Your browser does not support File API");
      }
    }

* {
  margin: 0;
  padding: 0;
  /*transition*/
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
body {
  padding: 30px;
}
/* Slider */

.slider {
  height: 250px;
  left: 50%;
  margin: -125px -225px;
  position: absolute;
  top: 48%;
  width: 450px;
  /*box-shadow*/
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
.slider .frames {
  height: 250px;
  position: relative;
  list-style-type: none;
}
.slider .frames .slide {
  height: 250px;
  list-style: none;
  position: absolute;
  width: 450px;
}
.slider .slide:target {
  z-index: 100
}
.slider .frames .slide img {
  height: 250px;
  width: 450px;
}
.slider .frames .slide nav a {
  background: hsla(0, 0%, 0%, .75);
  color: #fff;
  font-size: 16px;
  line-height: 50px;
  margin-top: -25px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 50%;
  width: 50px;
  visibility: hidden;
  z-index: 10;
}
.slider:hover .frames .slide nav a {
  opacity: 1;
  visibility: visible;
}
.slider .slide nav a:hover {
  cursor: pointer;
}
.slider .frames .slide nav .prev {
  /*border-radius*/
  -webkit-border-radius: 0 25px 25px 0;
  -moz-border-radius: 0 25px 25px 0;
  border-radius: 0 25px 25px 0;
  left: 0;
}
.slider .frames .slide nav .next {
  /*border-radius*/
  -webkit-border-radius: 25px 0 0 25px;
  -moz-border-radius: 25px 0 0 25px;
  border-radius: 25px 0 0 25px;
  right: 0;
}
.slider .frames .slide nav a:hover {
  background: #000
}
.slider .quicknav {
  bottom: 0;
  font-size: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}
.slider:hover .quicknav {
  opacity: .9
}
.slider .quicknav li {
  display: inline-block
}
.slider .quicknav a {
  background: hsla(0, 0%, 100%, .9);
  border: 1px solid hsla(0, 0%, 0%, .9);
  /*border-radius*/
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  display: block;
  height: 10px;
  margin: 10px 5px;
  text-decoration: none;
  width: 10px;
}
.slider .quicknav a:hover {
  background: hsla(0, 0%, 50%, .9)
}

.nav {
 width:100%;
 text-align:center;
}

.nav a {
  display:inline-block;
  background:transparent;
  border-radius:50%;
  border:4px solid transparent;
  width:24px;
  height:24px;
  margin:4px;
}

.nav a img {
  width:22px;
  height:22px;
  border-radius:50%;
}


.slider #one:target ~ .quicknav a[href="#one"],
.slider #two:target ~ .quicknav a[href="#two"],
.slider #three:target ~ .quicknav a[href="#three"],
.slider #four:target ~ .quicknav a[href="#four"],
.slider #five:target ~ .quicknav a[href="#five"] {
  background: hsla(0, 0%, 0%, .9);
  border-color: hsla(0, 0%, 100%, .9);
  background: rgb(244, 246, 245);
  /*linear-gradient*/
  background: -webkit-gradient(linear, left top, left bottom, color-stop(rgba(244, 246, 245, 1), 0.01), color-stop(rgba(203, 219, 219, 1), 1), color-stop(rgba(216, 216, 216, 1), 1));
  background: -webkit-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  background: -moz-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  background: -o-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  background: linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(244, 246, 245, 1)), color-stop(100%, rgba(203, 219, 219, 1)), color-stop(100%, rgba(216, 216, 216, 1)));
  background: -webkit-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  background: -moz-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  background: -o-linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  background: linear-gradient(top, rgba(244, 246, 245, 1) 1%, rgba(203, 219, 219, 1) 100%, rgba(216, 216, 216, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f4f6f5', endColorstr='#d8d8d8', GradientType=0);
  /*box-shadow*/
  -webkit-box-shadow: inset 0 0 3px #000, 0 0 2px rgba(0, 0, 0, .5), 0 2px 3px #666;
  -moz-box-shadow: inset 0 0 3px #000, 0 0 2px rgba(0, 0, 0, .5), 0 2px 3px #666;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button id="_uploadImages" class="btn btn-primary">Upload Images</button>

<form id="_imagesForm" action="" method="post">
  <input id="_imagesInput" accept="image/*" type="file" style="display:none" multiple>
</form>

<div id="_displayImages">
  <div class="slider">
    <ul id="frames" class="frames">

    </ul>
    <div class="nav"></div>
  </div>
</div>

jsfiddle http://jsfiddle.net/yfr57u6w/24/