- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试制作一个幻灯片,您可以将计算机中的图像直接上传到幻灯片中。可以说,这是一个非常贫穷的人的 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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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);
}
}
这是链接:
最佳答案
tl;dr固定在底部。
这里的加载代码有两个主要问题:
第一个问题只需在加载第二个图像的代码周围添加一个 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 */
}
关于javascript - 将本地镜像文件上传到幻灯片中,第一个图像加载,第二个不加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45390052/
我需要将 OCI 镜像 list 转换为 Docker v2.2 镜像格式,反之亦然。但我找不到两者之间的任何区别,是否有任何实际区别或它们相同? 最佳答案 Docker 镜像 list V 2,模式
LNMP 是代表 Linux 系统下的 Nginx、Mariadb、PHP 相结合而构建成的动态网站服务器架构。下面使用docker制作分布式lnmp 镜像。 1、docker 分布式 lnmp
你好,我创建了一个基础镜像;但是,每当我运行 docker build . 时,我都看不到成功构建 我的 docker 文件 FROM centos:7 ARG user=john ARG home=
我想要我的 iPhone 应用程序中有一个功能,可以将图像转换为类似镜像的方式。 就像如果有一个左手举起的人的图像,那么转换后的图像必须有右手举起的同一个人。 任何代码或链接将不胜感激 预先感谢您的帮
我们希望将一个Elasticsearch集群放置在kubernetes集群的顶部(当前有2个节点,但是我们计划增加它)。 是否可以通过使集群中的每个节点包含相同数据的方式配置elasticsearch
我试图了解 docker 如何在文件系统上存储图像和图层。构建图像时,图层出现在 /var/lib/docker/image/overlay2/layerdb 中,图像出现在 /var/lib/doc
所以我最近开始使用 docker,因为我认为让我的网站 dockerised 会很好。我有一个 super 简单的 docker-compose.yml 文件,其中仅包含 wordpress:late
我有一个 docker 镜像,叫它 dockerimage/test。每次我更新它时,我都会增加一个标签,所以 dockerimage/test:1、dockerimage/test:2 等等。 当我
我开始使用 Docker,我发现我可以将主图像存储库放在不同的磁盘上(符号链接(symbolic link)/var/lib/docker 到其他位置)。 但是,现在我想看看是否有办法将它拆分到多个磁
显然应用程序打包和部署似乎有两种做法 创建 Docker 镜像并部署它 从头开始构建和部署应用程序。 我对如何使用选项 1) 感到困惑。前提是你获取一个 docker 镜像并在任何平台上重复使用它。但
我有一个 UIView具有透明背景和一些按钮。我想捕获 View 的绘图,将其缩小,然后在屏幕上的其他位置重新绘制(镜像)它。 (在另一个 View 之上。)按钮可以更改,因此它不是静态的。 最好的方
我正在为一个项目编写测试,我想测试和验证一个 docker 镜像构建。但我不想推送图像。 我希望图像构建在 CI(如 taskcluster)上并运行测试。 最佳答案 您需要使用 taskcluste
我想复制每个 html 页面中的代码,同时添加一些更改: 例子: Any text (even if includes :., 输出: Any text (even if includes :.,
我使用三星 ARM Cortex A9 Exynos4412 板。我在板上启动“linux + Qt”img。但是板上没有包管理器,也没有 make 、 gcc 命令。在/bin 文件中有文件 Bus
是否有可能以某种方式设置一个 git 存储库,该存储库像通常的 --mirror 一样用于 pull 入它,但在将从推送到另一个存储库时没有强制? 最佳答案 您可以像这样添加 --no-force 来
背景 最近在巡检过程中,发现harbor存储空间使用率已经达到了80%。于是,去看了一下各项目下的镜像标签数。发现有个别项目下的镜像标签数竟然有好几百个。细问之下得知,该项目目前处于调试阶段
以下均在centos 7进行的操作 docker安装 ? 1
我知道如何删除 N 天前创建的旧 Docker 镜像。 See here 但我真正想做的是删除过去 N 天未使用的旧 Docker 镜像。 目标是保留经常使用的图像,即使在我进行清理时没有容器实际使用
我有一个自定义的 docker 镜像,已经构建好了。没有可用的 Dockerfile。在容器内部,可以使用自定义用户,而不是 root,比如 test。此用户已附加到组 test。这是容器的默认用户。
我有一个开发数据库,我想将其提交到 docker 镜像中,然后推送到私有(private)存储库并用于本地开发和 CI 构建。 数据库保存为SQL备份,我可以通过将备份文件映射到官方镜像的/doc
我是一名优秀的程序员,十分优秀!