Question

你好我有一个图像上传图像预览，当用户上传图像时，一个按钮删除显示取消该图像（图像用户上传）并切换回图像默认（对于这种情况下占位符图像），以及按钮删除隐藏，因为输入文件没有任何值。现在我成功地在用户上传时显示按钮。但是当用户点击删除。只有按钮删除隐藏，但图像仍然存在。如何在用户点击删除时将图像恢复为占位符？

这是我的代码

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

这适用于多种类型的图像。

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

这适用于一种图像尺寸

$connection = ssh2_connect($host[0], 22);
if (ssh2_auth_password($connection, $host[1], $host[2])) {
if ($tunnel = ssh2_tunnel($connection, '127.0.0.1', 1080)){
 //curl commands
 }
}

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

1 个答案: