图像预览功能在第一个选项卡上正常工作，为什么它不能在其他选项卡上工作，我正在通过单击选项卡重新加载图像预览功能，我在网络中找不到这个问题的示例。 有什么想法吗？
<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>