創建按鈕重置圖像預覽

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。

這是針對維度中的多種圖像類型。

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

這是一種類型的圖像的再次更新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"); 
});