gpt4 book ai didi

javascript - 选项卡内容文件图像预览脚本不起作用

转载 作者:行者123 更新时间:2023-12-02 23:55:32 24 4
gpt4 key购买 nike

图像预览功能在第一个选项卡上工作正常,为什么在其他选项卡上不起作用,我通过单击选项卡重新加载图像预览功能,我在网上找不到解决此问题的示例。
有什么想法吗?

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );

function PreviewImage() {
var count = $('.tab-content').data('id');
var preview = document.getElementById('uploadPreview_'+count);
var file = document.getElementById('uploadImage_'+count).files[0];
var reader = new FileReader();

reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);

if (file) {
reader.readAsDataURL(file);
}
};

$(document).on('click', '#tab',function(e){
PreviewImage();
e.preventDefault();
});
</script>
</head>
<body>
<div id="tabs">
<ul class="nav nav-tabs" data-toggle="tabs">
<li id="tab"><a href="#tabs-1"> tab 1</a></li>
<li id="tab"><a href="#tabs-2"> tab 2</a></li>
</ul>
<div id="tabs-1" class="tab-content" data-id="1">
<img id="uploadPreview_1" src="" alt="background" class="img-responsive center-block widget-background" style="height: 180px; width: auto;" alt="image-alt">
<input id="uploadImage_1" type="file" accept="image/*" onchange="PreviewImage();"/>

</div>
<div id="tabs-2" class="tab-content" data-id="2">
<img id="uploadPreview_2" src="" alt="background" class="img-responsive center-block widget-background" style="height: 180px; width: auto;" alt="image-alt">
<input id="uploadImage_2" type="file" accept="image/*" onchange="PreviewImage();"/>

</div>
</div>
</body>
</html>

最佳答案

这里现在可以工作了。

我认为仅通过查看代码就可以理解。

但是您可以看到我们需要将上下文传递给预览图像。

$(function() {
$("#tabs").tabs();
});

function PreviewImage(tab) {
var preview = tab.parentNode.querySelector('img');
var file = tab.files[0];
var reader = new FileReader();

reader.addEventListener("load", function() {
preview.src = reader.result;
}, false);

if (file) {
reader.readAsDataURL(file);
}
};

document.addEventListener('change', (e) => {
if(e.target.matches('input[type="file"]')) {
console.log(e.target);
PreviewImage(e.target);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
<div id="tabs">
<ul class="nav nav-tabs" data-toggle="tabs">
<!-- Corrected id : Should be unique / added class tab for click. -->
<li id="tab1" class="tab"><a href="#tabs-1"> tab 1</a></li>
<li id="tab2" class="tab"><a href="#tabs-2"> tab 2</a></li>
</ul>
<div id="tabs-1" class="tab-content" data-id="1">
<img id="uploadPreview_1" src="" alt="background" class="img-responsive center-block widget-background" style="height: 180px; width: auto;" alt="image-alt">
<input id="uploadImage_1" type="file" accept="image/*" />

</div>
<div id="tabs-2" class="tab-content" data-id="2">
<img id="uploadPreview_2" src="" alt="background" class="img-responsive center-block widget-background" style="height: 180px; width: auto;" alt="image-alt">
<input id="uploadImage_2" type="file" accept="image/*" />

</div>
</div>
</body>

关于javascript - 选项卡内容文件图像预览脚本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55408796/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com