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 + '">←</a>' + '<a class="next" href="#slide-' + next_i + '">→</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/
代码的问题是，在执行加载事件时 - 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会是这样的。
.innerHTML取代.append() ; 创建变量idx来增加.slide li元素id s; 添加委托click事件以nav a元素; 添加.bind()与this设置为picReader ， i作为参数传递给picReader onload事件; 添加file.name到img元素的title属性; 添加“点”导航与#frames下的图像#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">←</a>'
+ '<a class="next">→</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>上一篇: Slider FileReader JS Multiple Image Upload (Incrementing Index)