javascript - 将本地镜像文件上传到幻灯片中，第一个图像加载，第二个不加载

Question

我正在尝试制作一个幻灯片，您可以将计算机中的图像直接上传到幻灯片中。可以说，这是一个非常贫穷的人的 wowslider。

这是输入字段和 HTML:

<input type='file' id='getval' />

<div class="slideshow-container">
<div  class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img data-taken ="empty" id="first" src="" style="width:100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img data-taken= "empty" id="second" src="" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
</div>

如您所见，我正在使用数据集功能，最初在 HTML 中设置为“空”，然后更改为“已获取”。

现在的想法是将另一张图像上传到第二张幻灯片，然后将另一张图像上传到第三张幻灯片，依此类推。

显示了第一个图像，但第二个图像未加载到 HTML 元素中，控制台中也没有错误消息。

此外，在输入元素旁边，显示了 img 文件 src，我该如何删除它？

这是 JS

var uploadHere = document.getElementById("getval");

uploadHere.addEventListener("change", readURL, true);
function readURL() {
var file = uploadHere.files[0];
var reader = new FileReader();
var reader2 = new FileReader();
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
reader.onloadend = function() {
if (first.dataset.taken == "empty") {
  first.src = reader.result;
  first.dataset.taken = "full";
}
};
if (file) {
reader.readAsDataURL(file);
}
if (first.dataset.taken == "full" && second.dataset.taken == "empty") {
second.src = reader2.result;
second.dataset.taken = "full";
}
if (file) {
reader2.readAsDataURL(file);
}
}

这是链接:

https://codepen.io/damianocel/pen/PKZZMz

Answer 1

tl;dr固定在底部。

这里的加载代码有两个主要问题:

1. 当阅读器加载时，您没有加载第二张图像，并且
2. 您正在同步处理文件加载(只有第一个文件加载时，第二个文件才会加载)。

第一个问题只需在加载第二个图像的代码周围添加一个 reader2.onload 事件监听器即可解决。然而，请参阅下面我使用循环所做的操作，它同时解决了这两个问题，并且应该使代码更易于维护。

您正在同步处理文件上传。然而，JavaScript 是异步的(这就是您附加这些事件监听器的原因)，这意味着操作不一定按照它们在代码中出现的顺序发生。

如果第一个图像完成，第二个图像只会上传到第二个插槽，否则它将被丢弃。您真正想要做的是在开始时将每个图像分配给一个面板，然后将每个图像上传到其分配的面板。这意味着第二个图像不再依赖于正在加载的第一个图像。此方法可用于接受幻灯片中任意数量的面板。

function readURL(e) {
  // Get the files from the input
  var files = e.target.files;
  // The IDs of your slideshow panels
  var panels = [ 'first', 'second', 'third' ];
  // Upload the number of files uploaded, but no more than you have panels
  for (var i = 0; i < files.length && i < panels.length; ++i) {
    var panel = document.getElementById(panels[i]);
    // Use a separate function to prevent handlers from all using the same value of i
    uploadImage(files[i], panel);
  }
}

function uploadImage(file, panel) {
  var reader = new FileReader();
  reader.onloadend = function (e) {
    // Triple = (===) makes sure that the variables are of the same type
    if (panel.dataset.taken === 'empty') {
      panel.src = reader.result;
      panel.dataset.taken = 'full';
    }
  };
  if (file) {
    reader.readAsDataURL(file);
  }
}

上传按钮旁边的输入源是该元素的一部分。您可以使用以下 CSS 隐藏它。宽度是特定于浏览器(和操作系统？)的，因此如果您确实不希望文件列表可见，则应该创建一个自定义元素，将事件传递到正常的上传按钮。

input[type="file"] {
  overflow-x: hidden;
  width: 83px; /* browser and OS specific */
}

完整修复:https://codepen.io/_Billy_Brown/pen/RZrRWj