イメージプレビューでリセットボタンを作成する

Question

こんにちは私は画像プレビュー付きの画像をアップロードしています。ユーザーが画像をアップロードするとボタンが削除され、その画像をキャンセルします（画像のユーザーアップロード）。プレースホルダー画像）、そしてボタンの削除は、入力ファイルが何も値を持たなかったので隠されてしまった。 ここでは、ユーザーのアップロード時にボタンが表示されます。ユーザーが削除をクリックしたとき。ボタンの削除だけが隠されたが、まだそこには画像が残っている。ユーザーが画像をクリックしたときにプレースホルダに戻す方法は？

が、これはこれはあなたの関数でこのコードを交換してくださいjsfiddle https://jsfiddle.net/uxsxuwzd/1/

ありがとう

Answer 1

である私のコード

$(document).ready(function() { 
     $(".input-file").on("change", function(){ 
      if($(this).val() == "") { 
       $(this).parent().find(".image-upload-footer").css({"display": "none"}); 
      } else { 
      $(this).parent().find(".image-upload-footer").css({"display": "block"}); 
      } 
     }); 
     $(".reset").click(function(){ 
      $(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change'); 
     }); 
    }); 

です。入力ファイルの選択されたsrcをリセットする必要があります。

これは、複数の種類の画像を対象としています。

$(document).ready(function() { 
 
    function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
     $('#image_upload_preview1').attr('src', e.target.result); 
 
     } 
 

 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
    } 
 
    $("#inputFile1").change(function() { 
 
    readURL(this); 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
    function readURLs(input) { 
 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
     $('#image_upload_preview2').attr('src', e.target.result); 
 
     } 
 

 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
    } 
 
    $("#inputFile2").change(function() { 
 
    readURLs(this); 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
     $(".input-file").on("change", function(){ 
 
      if($(this).val() == "") { 
 
       $(this).parent().find(".image-upload-footer").css({"display": "none"}); 
 
      } else { 
 
      $(this).parent().find(".image-upload-footer").css({"display": "block"}); 
 
      } 
 
     }); 
 
     $(".reset").click(function(){ 
 
      $(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change'); 
 
      
 
      var newImg=$(this).attr('custattr'); 
 
       
 
      $("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src",newImg); 
 
     }); 
 
    });

.image-upload-footer p{ 
 
\t display: inline 
 
} 
 
.image-upload input[type=file]{ 
 
    display: none; 
 
} 
 
.image-upload label{ 
 
\t margin-bottom: 0; 
 
} 
 
.image-upload img{ 
 
\t cursor: pointer; 
 
} 
 
.profileback .deleteThis{ 
 
\t position: absolute; 
 
    top: 6px; 
 
    right: 21px; 
 
    padding: 0; 
 
} 
 
.deleteThis span{ 
 
\t color: #fff 
 
} 
 
.image-upload-footer{ 
 
\t background-color: rgba(34, 34, 34, 0.87); 
 
    \t margin-top: -6px; 
 
    \t padding: 4px 10px; 
 
} 
 
.image-upload-footer button{ 
 
    padding: 0px 5px; 
 
    border-radius: 100%; 
 
    margin-left: 15px; 
 
} 
 
.image-upload-footer button span,.image-upload-footer p{ 
 
\t color: #fff ; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
 

 
<div class="col-xs-6"> 
 
    <div class="image-upload"> 
 
    <label for="inputFile1"> 
 
     <img id="image_upload_preview1" class="img-responsive mainPic" src="http://placehold.it/350x150"/> 
 
    </label> 
 
    <input id="inputFile1" class="input-file" type="file"/> 
 
    <div class="image-upload-footer" style="display:none"> 
 
     <button type="reset" custattr="http://placehold.it/350x150" class="btn btn-red reset"> 
 
     <span class="fa fa-times"aria-hidden="true">X</span> 
 
     </button> 
 
     <p>remove</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="col-xs-6"> 
 
    <div class="image-upload"> 
 
    <label for="inputFile2"> 
 
    <img id="image_upload_preview2" class="img-responsive" src="http://placehold.it/746x728" alt=""/> 
 
    </label> 
 
    <input id="inputFile2" class="input-file" type="file"/> 
 
    <div class="image-upload-footer" style="display:none"> 
 
    <button type="button" custattr="http://placehold.it/746x728" class="btn btn-red reset"> 
 
     <span class="fa fa-times"aria-hidden="true">X</span> 
 
    </button> 
 
    <p>remove</p> 
 
    </div> 
 
</div> 
 
</div>

これは、画像の1種類です再びのsrc値を更新することによって、

$(".reset").click(function(){ 
    $(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change'); 
    $("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src","http://placehold.it/350x150"); 
});