如何显示多张图片?

2023-12-10

我的html代码是这样的:

<input type='file' multiple/>
<img id="myImg" src="#" alt="your image" />

我的 JavaScript 代码是这样的:

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

演示是这样的:https://jsfiddle.net/oscar11/ob8aas23/

当我上传一张图片时,它会显示该图片

但是当我上传多于一张图片时,只显示一张图片

我怎么解决这个问题?


问题是只有一个img标签,但要显示多个图像,数量相同img需要标签。所以最好循环遍历files.length并动态创建图像标签并向其添加源

$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      for (var i = 0; i < this.files.length; i++) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[i]);
      }
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').append('<img src=' + e.target.result + '>');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' multiple/>
<div id="myImg">
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何显示多张图片? 的相关文章

  • 具有行组的 JQuery 斑马条纹表

    我通常将斑马条纹表行设置为奇数 偶数 如下所示 效果很好 table tbody tr visible even this addClass even table tbody tr visible odd this addClass odd
  • Jquery:如何隐藏或关闭所有打开的引导工具提示

    这样我就可以从我的验证函数中显示引导工具提示 var options html true placement bottom title div class tooltip alert alert danger message div inp
  • Bing.com 如何创建放大的缩略图?

    当我使用 Bing com 搜索图像时 我发现它们的图像经过精心裁剪和排序 当您将鼠标放在图像上时 会弹出另一个窗口 其中显示放大的图像 我想在我的程序中做同样的事情 我检查了他们页面的源代码 他们正在使用 javascript 但我仍然不
  • 在 HTML 中移动选取框/下移文本

    我正在尝试向下移动或移动 HTML 中的文本 但我似乎无法将其移动到任何地方 我添加了一个颜色命令来更改文本的颜色 但似乎只是移动了 它一直到顶部
  • 带 CSS 网格的等宽侧边栏列

    是否可以让左右列具有相同的宽度 而中间列占据剩余空间 我不想设置像这样的百分比grid template columns 20 60 20 因为并不总是确定这些列的内容是什么 Flexbox 和表格似乎没有解决这个问题的方法 所以我再次尝试
  • JQuery DataTable 单元格从行单击

    我正在尝试在 jquery 数据表上实现一个函数 该函数返回单击行的第一列和第四列 我正在遵循这个示例 它允许我操作单击的行http datatables net examples api select single row html ht
  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生
  • Chrome Javascript 调试器暂停时不会重新加载页面

    有时 当我在 Chrome 中调试某些 javascript 并且暂停了 javascript 时 如果我尝试重新加载页面 chrome 只会 继续 调试器 单步执行到下一个断点 似乎没有任何方法可以强制 javascript 完全停止运行
  • 使用 onBlur 事件上的值更新 React 输入文本字段

    我有以下输入字段 在模糊时 该函数调用服务来更新服务器的输入值 完成后 它会更新输入字段 我怎样才能让它发挥作用 我可以理解为什么它不允许我更改字段 但我能做些什么才能使其工作 我无法使用defaultValue因为我会将这些字段更改为其他
  • 捕获 XSS(跨站脚本)攻击的最佳正则表达式(Java 中)?

    杰夫实际上在净化 HTML http refactormycode com codes 333 sanitize html 但他的示例是用 C 编写的 而我实际上对 Java 版本更感兴趣 有人有更好的 Java 版本吗 他的示例是否足以直
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • 理论上防止 WebSocket 中第一个收到的消息丢失

    服务器端代码发送消息立即地连接打开后 它向客户端发送初始配置 问候语 以下代码是在客户端 var sock new WebSocket url sock addEventListener error processError sock ad
  • RTCDataChannel发送方法不发送数据

    我的 RTCDataChannel 遇到一个奇怪的问题 我正在对 WebRTC 进行一些研究 并且已经可以进行 WebRTC 音频 视频聊天 现在我想使用 RTCDataChannel 添加文本聊天和文件共享 我已经像这样创建了 RTCDa
  • Excel 类似 HTML 表格,可在 x 轴(完整表格)和 y 轴(标题固定)上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关
  • 使用 jQuery 修改 HTML 表格的结构

    我有一个元素列表 X在以下示例中 显示在 HTML 表格的行或列中 从 HTML 代码的角度来看 我有 水平显示 table tr td A td td B td td C td tr table 或 垂直显示 table tr td A
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • 错误:创建 React Native 项目版本 0.59.9 时找不到 template.config.js

    当我尝试创建 React Native 项目版本 0 59 9 时 出现以下错误 错误错误 无法在 react native 模板中找到 var folders zc h93bvpb573q24 5ynvgkn1wc0000gn T rnc
  • C# 中的 mshtml.HTMLDocumentClass

    在 C 中 我设法从 InternetExplorer 对象获取整个 HTMLDocumentClass 导航到某个 URL 然而 在 Visual Studio 2008 的调试模式下 该特定 URL 的 HTMLDocumentClas
  • 未捕获(承诺中)TypeError:无法读取 null popover.js 的属性“模板”

    当我触发时我注意到一个错误 popover dispose 当我上下滚动页面时 函数会发生错误 并且它会减慢我的页面速度 该函数按其应有的方式运行并关闭弹出窗口 但这就是错误Uncaught in promise TypeError Can
  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • Node js 在复制之前检查文件是否打开

    在将文件复制到另一个位置之前 我需要检查文件是否已打开 下面的代码告诉您打开文件时是否显示错误代码 EBUSY 但如果文件未打开 它将删除文件的内容 有没有更好的方法来获取这些信息 fs open my file dwg w functio
  • 如何估计 R 中图形线上的点的坐标?

    假设我有数据 x lt c 1900 1930 1944 1950 1970 1980 1983 1984 y lt c 100 300 500 1500 2500 3500 4330 6703 然后 我绘制这些数据并在已知的 x 和 y
  • Ivy 无法解析依赖关系的范围,该依赖关系是传递依赖关系的依赖关系

    我向 ivy xml 添加一个依赖项 让我们将其命名为 A 该文件在 Maven 中心有一个 pom 文件 Ivy 使用 ibiblio 来解决 Maven 依赖关系 添加到ivy xml 的依赖项 A 具有传递依赖项 B 到目前为止一切顺
  • $_Session 登录和注销 php 的“复杂性”

    我正在为大学做一个数据库项目 我在这里遇到了一个问题 我试图在没有会话时显示 登录 在有会话时显示 注销 但实际上即使在我登录后它仍然显示我 登录 并且我尝试 print r SESSION 它告诉我该变量未定义 我有一个注销文件 和一个
  • PHP 发送 UTF-8 邮件而不使用 PEAR::Mail PEAR::Mail_Mime

    我希望能够使用包含 8 位字符 的 PHP mail 发送电子邮件 它们将用在主题 消息和 发件人 标题中 在不使用 PEAR 包的情况下如何做到这一点 如果您不介意对不需要的单词进行编码 最简单的解决方案是将所有内容放入 base64 R
  • 上传文件之前生成 Firebase 存储下载 url

    Firebase Storage 有没有办法生成一个指向任何内容的下载网址 以便稍后将文件上传到该网址 类似的东西 在 Kotlin 中 fun generateItemPhotoUrl id String storageRef child
  • 调用链内的空合并

    如果我有一长串对象 每个对象都有可能在 Linq where 子句中返回 null 例如 SomeSource Where srcItem gt srcItem DataMembers SomeText Connection Connect
  • Realm 返回空对象列表

    我想从 Farmer 对象中获取 CropDataList 当我获取 Farmer 对象时 它不为空 但与 Farmer 对象关联的作物数据列表返回空 我可以通过 Stetho 查看数据库条目 并且列表中有一个条目 这是我的代码 publi
  • 使用 LINQ(赛程列表)形成锦标赛表

    I have an array of players string and now I need to get an array of pairs representing games playerN playerM to orginize
  • httr POST 请求 API 返回 400 错误

    我正在使用 R 中的 httr 包来尝试查询 postcode io API http postcodes io docs 我可以按照说明成功查询单个邮政编码 sample4 lt GET api postcodes io postcode
  • Bull队列:当作业失败时,如何停止队列处理剩余作业?

    我在用bull队列来处理一些作业 在当前场景中 每个作业都是某种操作 因此 每当队列中的操作列表中的操作 作业 失败时 队列就必须停止处理剩余的作业 操作 到目前为止我尝试过什么 所以我尝试在特定作业失败时暂停队列 接下来 队列在耗尽时恢复
  • Glassfish v4 和 SSL - 管理员不再起作用

    我已经完成了将 SSL 证书添加到 glassfish v4 中的步骤 我已经验证它可以通过浏览器和我的 java swing 客户端工作 我在客户端使用 apache 的 http 客户端库 不起作用的是管理控制台 成功导入 SSL 后
  • 如何在角度2中使用jquery?

    我知道我是否需要在 Angular 1 3 或 1 4 中使用第三方库 我需要对该东西进行指令并在我们的项目中使用它 现在我正在使用角度2 0 我想把这个做成angular 2 https jqueryui com autocomplete
  • minSdkVersion破解程序

    所以每当我添加
  • 使用 for 循环将输入分成两部分

    这就是我在尝试使用网络课程学习 Python 时陷入困境的地方 编写一个程序 采用 number1 number2 形式的单个输入行 其中两者都表示正整数 并输出两个数字的总和 例如 输入 5 12 时输出应为 17 我们不应该使用 spl
  • 使用 JSoup 从 Google 搜索结果的所有页面检索所有链接

    我有以下使用 JSoup 在 java 中解析 HTML 的代码 Document linksDoc null linksDoc Jsoup connect http www google com search q jbutton user
  • 无法让球衣 2 应用程序使用自定义杰克逊 XmlMapper

    我正在使用 Jersey 2 22 1 和 Jackson 2 6 3 编写 Web 应用程序 我的 pom xml 如下所示
  • Java ACM 包

    我正在尝试在 Eclipse 中编写一个 java 应用程序 我真的很想使用 ACM Program 包 但是 我的 Eclipse 副本没有安装它 我查遍了整个网络 但找不到 ACM 包的下载 更多信息 每当我尝试代码时 package
  • Chrome 中 :first-letter 的奇怪行为

    将看似无害的类添加到具有包含 first letter 的类的元素会导致第一个字母在某些情况下无法正确呈现 元素最初具有类 unindent 然后添加类 menuitemon 小提琴http jsfiddle net pgf3reyt 4
  • 如何显示多张图片?

    我的html代码是这样的