Delete photo by clicking a link



  • A while ago, I took a question here on the site inserir a descrição da imagem aqui

    The code I have is this:

    <input type="file" name="Foto" class="form-control" id="fileUpload" placeholder="Foto">
    <img id="imagem" src="#" alt="Preview da sua imagem" style="width: 130px; margin-top: 10px; display: none" class="img-thumbnail" />
    <label id="excluir" style="margin-left: 50px; color: #00F; display: none">Excluir</label>
    

    JQuery

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
    
        reader.onload = function (e) {
            $("#imagem").attr('src', e.target.result);           
        }     
        reader.readAsDataURL(input.files[0]);         
    }
    

    }

    $("#fileUpload").change(function(){
    readURL(this);
    $("#imagem").css("display","block");
    $("#excluir").css("display","block");
    });



  • It is quite simple to add the following line:

    $("#excluir").click(function(){
        $("#fileUpload").val("");
        $("#imagem").css("display","none");
        $("#excluir").css("display","none");
    });
    

    Thus it will remove the value of the input file and again hide the image.

    Full code:

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
    
        reader.onload = function (e) {
            $("#imagem").attr('src', e.target.result);           
        }     
        reader.readAsDataURL(input.files[0]);         
    }
    

    }

    $("#fileUpload").change(function(){
    readURL(this);
    $("#imagem").css("display","block");
    $("#excluir").css("display","block");
    });

    $("#excluir").click(function(){
    $("#fileUpload").val("");
    $("#imagem").css("display","none");
    $("#excluir").css("display","none");
    });

    Example: https://jsfiddle.net/8xzqede5/


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2