javascript - 我正在实现图像预览功能,但在此期间无法重置相关文件输入
问题描述
我正在实现图像预览功能(用于具有动态 id 的多个隐藏浏览按钮),但在此期间无法重置相关文件输入
一切正常..
HTML部分:
<div class="col-sm-12">
<?php
$prd_imgs_sql = "SELECT * FROM `ci_product_images` WHERE `added_by` = '".$this->session->userdata('user_id')."' AND `is_prod_submited` = '0'";
$prd_imgs_res = $this->home->customQuery($prd_imgs_sql);
$chk_img = 1;
foreach($prd_imgs_res as $res){
if($res->prod_img != "" ){
$prdImgThumb = BASE_URL.'uploads/productImages/150x150/'.$res->prod_img_thumb;
}else{
$prdImgThumb = BASE_IMAGE.'plbtn.jpg';
}
if($res->prod_img_link != "" ){
$prdImgLinkTxt = $res->prod_img_link;
$prdImgLink = $res->prod_img_link;
}else{
$prdImgLinkTxt = '';
$prdImgLink = BASE_IMAGE.'preview.png';
}
?>
<div class="row">
<div class="col-sm-2">
<img src="<?=$prdImgLink?>" class="img-responsive primg" id="preview_img_<?php echo $chk_img;?>">
</div>
<div class="col-sm-6">
<div class="input-group" style="margin-top: 20px">
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_<?php echo $chk_img;?>" name="url_input[]" value="<?=$prdImgLinkTxt?>" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default findbtn" type="button" id="find_btn_<?php echo $chk_img;?>">Find</button>
</span>
</div><!-- /input-group -->
<div class="err" id="valmsg_<?php echo $chk_img;?>" style="display: none;"></div>
</div>
<div class="col-sm-1">
<h2 style="text-align: center;">Or</h2>
</div>
<div class="col-sm-3">
<div class="form-group">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_<?php echo $chk_img;?>" />
<?php if($res->prod_img != "" ){ ?>
<a class="topright imgDelete" href="<?php echo BASE_URL;?>admin/products/delete_prd_img/<?php echo base64_encode($res->id);?>" id="imgdel_<?php echo $chk_img;?>">X</a>
<?php } ?>
<input type="file" name="prod_images[]" id="ip_<?php echo $chk_img;?>" class="hidBrws" style="display: none;" />
</div>
</div>
</div>
<?php
$chk_img++;
}
?>
<?php
while($chk_img<5){
?>
<div class="row">
<div class="col-sm-2">
<img src="<?php echo BASE_IMAGE."preview.png"; ?>" class="img-responsive primg" id="preview_img_<?php echo $chk_img;?>">
</div>
<div class="col-sm-6">
<div class="input-group" style="margin-top: 20px">
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_<?php echo $chk_img;?>" name="url_input[]" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default findbtn" type="button" id="find_btn_<?php echo $chk_img;?>">Find</button>
</span>
</div><!-- /input-group -->
<div class="err" id="valmsg_<?php echo $chk_img;?>" style="display: none;"></div>
</div>
<div class="col-sm-1">
<h2 style="text-align: center;">Or</h2>
</div>
<div class="col-sm-3">
<div class="form-group">
<img src="<?php echo BASE_IMAGE."plbtn.jpg"; ?>" class="edi_prd_img rk" id="brws_btn_<?php echo $chk_img;?>" />
<input type="file" name="prod_images[]" id="ip_<?php echo $chk_img;?>" class="hidBrws" style="display: none;" />
</div>
</div>
</div>
<?php
$chk_img++;
}
?>
</div>
我的 jQuery 脚本:
$(".edi_prd_img").click(function() {
var id = $(this).attr("id");
var tmp = id.split('_');
$("input[id='ip_"+tmp[2]+"']").click();
});
$(".hidBrws").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
var id = $(this).attr("id");
var tmp = id.split('_');
reader.onload = function(e) {
$('#preview_img_'+tmp[1]).attr('src','<?=base_url()?>preview.png');
$('#url_input_'+tmp[1]).val('');
$('#brws_btn_'+tmp[1]).attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
但是,当我想在某个特定事件上重置其中一个浏览按钮(文件)时,我遇到了问题..它没有被重置。
我的浏览按钮(文件)重置 jquery 脚本:
$('.imgLnk').keyup(function(e){
var id = $(this).attr("id");
var tmp = id.split('_');
$('ip_'+tmp[2]).val(''); //tried with this but not happening
$('#brws_btn_'+tmp[2]).attr('src', '<?=base_url()?>plbtn.jpg');
$('#imgdel_'+tmp[2]).hide();
});
但相关的重置 jquery 脚本不起作用..
不工作:$('ip_'+tmp[2]).val('');
请建议我更改或任何想法
解决方案
您的代码只有一个问题。您需要将您的线路更改$('ip_'+tmp[2]).val('');
为$('#ip_'+tmp[2]).val('');
. 由于这是您的标识符,因此您在语法上有一些小问题。
我刚刚将您的代码更新为静态代码并创建了小提琴。下面试试。出于测试目的,我启用了文件输入。
$(function(){
$('.imgLnk').keyup(function(e){
var id = $(this).attr("id");
var tmp = id.split('_');
$('#ip_'+tmp[2]).val(''); //tried with this but not happening
$('#brws_btn_'+tmp[2]).attr('src', '<?=base_url()?>plbtn.jpg');
$('#imgdel_'+tmp[2]).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_1" />
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_1" name="url_input[]" autocomplete="off">
<input type="file" name="prod_images[]" id="ip_1" class="hidBrws" style="display: block;" />
</div>
<div class="row">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_2" />
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_1" name="url_input[]" autocomplete="off">
<input type="file" name="prod_images[]" id="ip_2" class="hidBrws" style="display: none;" />
</div>
推荐阅读
- arm - 如何分析 Cortex-M3 上的无效 PC 故障?
- julia - Genie.j v1.1 是否支持用户登录和管理视图?
- specflow - Specflow - 您能否收集所有集成测试步骤以作为针对真实服务器的系统测试运行?
- docker - 从 $PATH 中找不到的 aws 批处理可执行文件启动 docker 时出现问题
- python - Evaluator 组件上的 TFX IndexError
- c# - 根据 C# .Net 核心方法中其他属性的值填充属性
- asp.net - Blazor wasm 模板控制台错误 - 未定义 jQuery
- c# - 您能否在 .NET WebApi 中丢失查询导致错误请求而不是 404?
- php - PHP - number_format 浮点数
- c# - Web 应用程序在哪里或哪个线程在 IIS 上运行时使用 ram