我在 html 中有一個回圈，它創建了 4 個輸入型別的檔案，在這個回圈中我有一個 img 標簽來預覽所選影像...
<div class="gallery_imgproduct">
@for (int i = 0; i < 4; i )
{
<div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<img id="main_image_product" src="~/site/img/product/286289f713.jpg" />
<input type="file" asp-for="ProductImgName" onchange="readURL(this);" class="form-control">
</div>
</div>
}
</div>
下面的 jQuery 代碼僅用于預覽輸入...
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#main_image_product')
.attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
}
}
如果選擇了影像，我希望在 img 標簽中顯示預覽...如果可能，請幫忙。如果沒有，請提出解決方案。謝謝
uj5u.com熱心網友回復：
您在 for 回圈中將預覽影像 ID 設為“main_image_product”。id 必須是唯一的。因此，您可以將該影像標簽移出回圈或使用 $i 為所有預覽影像創建唯一 ID。
<img id="main_image_product" src="~/site/img/product/286289f713.jpg" />
<div class="gallery_imgproduct">
@for (int i = 0; i < 4; i )
{
<div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<input type="file" asp-for="ProductImgName" onchange="readURL(this);" class="form-control">
</div>
</div>
}
</div>
或者
<div class="gallery_imgproduct">
@for (int i = 0; i < 4; i )
{
<div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<img id="main_image_product$i" src="~/site/img/product/286289f713.jpg" />
<input type="file" asp-for="ProductImgName" onchange="readURL(this,'main_image_product$i');" class="form-control">
</div>
</div>
}
</div>
function readURL(input,imgId) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#' imgId)
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/350455.html