create button reset auf Bildvorschau

Question

hallo ich habe ein Bild hochladen mit Bildvorschau, wenn Benutzer Bild hochladen, eine Schaltfläche entfernen zeigen zum Abbrechen dieses Bildes (das Bild Benutzer hochladen) und wechseln zurück zum Bild Standard (für diesen Fall Platzhalterbild), und die Schaltfläche Entfernen wurde ausgeblendet, da die Eingabedatei keinen Wert hatte. für jetzt ich Erfolg, um den Knopf beim Benutzerupload zu zeigen. aber wenn Benutzer auf Entfernen klicken. Nur der Button Remove wurde ausgeblendet, aber das Bild ist immer noch da. wie man das Bild zurück zum Platzhalter macht, wenn Benutzer klicken, um zu entfernen?

dies ist mein Code

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

ist dies die jsfiddle https://jsfiddle.net/uxsxuwzd/1/

thankyou

Answer 1

Bitte diesen Code in Ihren Funktionen ersetzen. Sie sollten den ausgewählten Quellcode der Eingabedatei zurücksetzen müssen.

Dies ist für mehrere Arten von Bildern in Dimension.

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

Dies ist für eine Art von Bildern

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