个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
jquery中的单张图片上传预览功能。我想分别更改每个框等多个功能以上传照片，您可以在下面的 html 脚本中看到这些照片。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function imagepreview(input){
if(input.files && input.files[0]){
var filerd = new FileReader();
filerd.onload=function(e){
$('#imgpreview').attr('src', e.target.result);
};
filerd.readAsDataURL(input.files[0]);
}
}
</script>
<style>
body{
font-family:arial;
}
.wrap{
border:0px solid;
width:40%;
margin:10px auto;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align:center;
padding:10px;
}
#idupload{
display:none;
}
.input-label{
background-color:#009688;
color:#fff;
padding:5px 15px;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<tr>
<th><img id="imgpreview" src="" width="100" height="100"></th>
<th><img id="imgpreview" src="" width="100" height="100"></th>
<th><img id="imgpreview" src="" width="100" height="100"></th>
</tr>
<tr>
<td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td>
<td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td>
<td><label for="idupload" class="input-label"><i class="fa fa-arrow-up"></i>upload</label><input type="file" id="idupload" onchange="imagepreview(this);" /></td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
问题是您有重复的 ID，函数 imagepreview() 总是在上传图像时更新相同的 ID。要解决此问题，请为每个图像预览指定一个唯一的 ID，并在文件上传框中放置相同的对应标识，这样一个唯一的文件上传框将更新一个唯一的图像预览。
这是一个演示。我为预览和上传都提供了唯一 ID，然后在 imagepreview() 中解析上传框 ID 并将其添加到页面上更新的图像预览 ID。 http://codepen.io/anon/pen/apOyZB
关于javascript - 如何制作jquery多图预览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41516268/
26
4
0
有没有办法获取其他网站页面的屏幕截图？ 例如:您在输入中引入一个网址，按 Enter 键，然后脚本会为您提供所输入网站的屏幕截图。我设法使用 headless 浏览器来完成此操作，但我担心这可能会占用
我如何在 UICollectionView 中添加下一个单元格的预览，当当前单元格被滑动时显示？这样感觉就像一堆卡片。我从 Chrome 的 iOS 应用程序及其标签切换器的实现中汲取了很多灵感。任何
HTML javascript 编程新手，我的页面实现有问题。我创建了多页 HTML 表单布局(使用 div)，它运行 4 个页面，大约有 140 个输入值(大多数是可选值)。我需要在实际提交之前实现
我正在尝试让 Qt5 QFileDialog 在选择图像打开时显示图像预览。 方法一:扩展QFileDialog 我用了this implementation of the dialog它适用于 Qt
我是 TFS 的新手，并尝试通过托管的 TFS (tfspreview.com) 进行我的第一次自动构建，但由于缺少程序集而失败。 我在解决方案中的一个项目引用了 Microsoft.WindowsA
我正在使用 SwiftUI 并编写了以下示例来展示我遇到的问题。当我添加多个按钮或多个文本时，它会创建两个单独的预览，但是当我在设备上运行应用程序时，它们会同时加载。附上一张照片: 我清理了我的构建文
我无法将代码覆盖率提高到最低。 90% 因为 XCode 考虑了 PreviewProvider。 我该怎么办？删除所有 SwiftUI 预览？或者有没有一种方法可以排除一些带有“PreviewPro
首先，请注意我搜索了一个 SocialMediaStackExchange 来问这个问题，但似乎没有。 这就是我想知道的。向 twitter 发布推文时，如果它是 youtube 链接或特定网站的
我正在使用谷歌地图 API 自动完成来获取搜索的机构的城市和国家/地区。为此，我有一个输入字段和搜索位置的 map 预览。这是 jsfiddle，但它目前不起作用(https://jsfiddle.n
在 OpenCart 商店中提供音频预览的最佳方法和播放器是什么？这将涉及上传完整轨道，然后提取要播放的部分 最佳答案 m3psplt是迄今为止您最好的选择。 有时安装起来有点冒险(特别是在 Cent
如果我运行: 127.0.0.1:8000/document/1/preview 此 pdf 文件已下载。 我需要在 HTML 中显示它(带有打印功能的预览)。怎么做？ views.py from x
我在预览 Wagtail 页面时遇到错误，但在发布和实时查看时一切正常。我的设置是这样的: from django.db import models from modelcluster.fields
我是一个新手，我一直在尝试在 docker 上安装 Mattermost(slack 替代方案)的预览版来尝试一下。我一直遵循官方指南。 拱门 Install Docker using the fol
如果我运行: 127.0.0.1:8000/document/1/preview 此 pdf 文件已下载。 我需要在 HTML 中显示它(带有打印功能的预览)。怎么做？ views.py from x
我在预览 Wagtail 页面时遇到错误，但在发布和实时查看时一切正常。我的设置是这样的: from django.db import models from modelcluster.fields
VS 调试器给我: _Color = "{Name=ff000040, ARGB=(255, 0, 0, 64)}" 我怎样才能“看到”什么颜色？ 我尝试了一个 html 页面: ________
我想显示来自 ImageField 的图像。我正在使用 Django crispy forms 。似乎我需要使用 HTML 布局助手，但我不确定如何在此处访问模板变量。 以下呈现一个空白图像标签: H
The following classes could not be instantiated: androidx.fragment.app.FragmentContainerView (Open C
我正在从事一个涉及数据集之间连接的项目，我们需要允许预览任意数据集之间的任意连接。这很疯狂，但这就是它有趣的原因。这是使用面向所以给定一个连接我想快速显示 ~10 行结果。 我一直在围绕不同的方法进行
我正在尝试上传图像并在用户提交之前进行预览，但由于某种原因我无法更改 div 或图像的宽度或高度，并且它会以正常尺寸进行预览。我什至将它设置为 1px x 1px，但它仍然不起作用。 $(functi
我是一名优秀的程序员,十分优秀！