javascript - 在图像预览上创建按钮重置

Question

你好，我有一个带有图像预览的图像上传，当用户上传图像时，会出现一个删除按钮以取消该图像(图像用户上传)并切换回图像默认值(对于这种情况占位符图像)，以及删除按钮被隐藏了，因为输入文件没有任何值(value)。现在我成功地在用户上传时显示了按钮。但是当用户单击删除时。只有删除按钮被隐藏，但图像仍然存在。如何在用户单击删除时使图像返回占位符？

这是我的代码

$(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');
        }); 
    });   

这是 jsfiddle https://jsfiddle.net/uxsxuwzd/1/

谢谢

Answer 1

请在您的函数中替换此代码。您应该必须重置输入文件的选定 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{
	display: inline
}
.image-upload  input[type=file]{
    display: none;
}
.image-upload label{
	margin-bottom: 0;
}
.image-upload img{
	cursor: pointer;
}
.profileback .deleteThis{
	position: absolute;
    top: 6px;
    right: 21px;
    padding: 0;
}
.deleteThis span{
	color: #fff
}
.image-upload-footer{
	background-color: rgba(34, 34, 34, 0.87);
 	margin-top: -6px;
 	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{
	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>

这是针对一种类型的图像维度

 $(".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");
});