作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
抱歉标题不是更好。这就是我所在的位置。我试图打开一个 openFileDialog,然后显示我在该按钮下方选择的图像。我可以用一个按钮和一张图片来完成它。但是我似乎无法让所选图片仅显示在适当的按钮下。我的脚本看起来像这样。
$('.custom-upload input[type=file]').change(function() {
var parentCommentId = $(this).id
$(this).next().find('input').val($(this).val());
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
function imageIsLoaded(e) {
$('img').attr('src', e.target.result);
$('img').fadeIn();
};
});
.custom-upload {
position: relative;
height: 40px;
width: 350px;
margin: 30px;
}
.custom-upload input[type=file] {
outline: none;
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.custom-upload .fake-file {
background: url(http://www.fold3.com/i/upload-icon.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}
.custom-upload .fake-file input {
font-size: 16px;
height: 40px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="custom-upload" id="taco">
<input type="file" id="eatme">
<div class="fake-file">
<input disabled="disabled" id="damn">
</div>
<img id="myImg" src="#" style="display: none;height:400px;" width=100% height=100%/>
</div>
<br>
<div id="result"></div>
<div class="custom-upload">
<input type="file">
<div class="fake-file">
<input disabled="disabled">
</div>
<img id="myImg" src="#" alt="your image" style="display: none;" width=100% />
</div>
最佳答案
使用 $("img")
选择所有 img 元素。您需要使用 DOM navigation methods从发生更改事件的输入中获取其相关的 img 元素。
$('.custom-upload input[type=file]').change(function() {
var $this = $(this); // store a reference to current input
$this.next().find('input').val($(this).val());
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
function imageIsLoaded(e) {
$this.closest('.custom-upload')
.find('img')
.attr('src', e.target.result)
.fadeIn();
};
});
我在(新)变量 $this
中保存了对当前文件输入的引用。然后在 img 加载处理程序中,我使用 .closest()
向上导航到包含的 div,然后使用 .find()
返回到其中的 img分区
(您可以使用 $this.siblings("img")
或 $this.next().next()
,但这只适用于您的特定现在的 html 结构 - 使用 .closest()
加上 .find()
将起作用,即使您稍后在 img 周围添加一个额外的(子)容器 div或者以其他方式调整结构,只要文件输入和 img 仍在同一个包含 div 中。)
关于javascript - 使用多个按钮在其按钮下显示所选图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28100950/
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止,我在 Swift 中有这个: import Foundation import Cocoa e
我是一名优秀的程序员,十分优秀!