javascript - 我正在实现图像预览功能，但在此期间无法重置相关文件输入

Question

我正在实现图像预览功能(用于具有动态 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('');

请建议我进行更改或有任何想法

Answer 1

您的代码只有一个问题。您需要将行 $('ip_'+tmp[2]).val(''); 更改为 $('#ip_'+tmp[2]).val( '');。由于这是您的标识符，因此您在语法上有一些小问题。

我刚刚将您的代码更新为静态代码并创建了 fiddle 。尝试下面。为了测试目的，我启用了文件输入。

$(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>