CODEWITHSUNDEEP
javascriptphpjqueryhtml
user6224087
user6224087

Reputation:

Removing uploaded Image

I can upload an image and preview it using the following HTML code and function. But after I select the image and preview it, I don't want to actually upload the image, I want to reset the entire form.

How can I just remove the uploaded image?

HTML:

 <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
    <input type="file" id="imgInp" style="margin-top: 4px;" />
    <img id="status-img" src="#" alt="" width="150" height="150" />
    <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    </div>
  </form>

Javascript:

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

$("#imgInp").change(function(){
    readURL(this);
});

Please help me guys!

Upvotes: 2

Views: 1869

Answers (1)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26288

Subham, the JS code you are using is not upload your image to server. It just convert your selected image into BASE64 and show it on an image tag. If you want to remove that image from preview, just reset the src tag of image like:

$('#status-img').attr('src', '');

or 

$('#status-img').removeAttr('src');

And to remove the selected image from input type image:

$('#imgInp').val('');

Upvotes: 1

Related Questions