Javascript：从浏览器中删除图像

Question

Following is the code I copied from the internet to show the preview of the image before uploading to the server. If I click upload image it triggers click event on input element and uploads the image. likewise if I cick on Delete I want to remove it from input element or from the web storage itself, I want to remove only that particular image so that it will not be processed by the server.

<input type="file" id="files" />
<img id="image" />
<div id="uploadimage"> upload image</div>
<a href="#"> Delete</a>

<script>
document.getElementById("uploadimage").onclick=function(){
    document.getElementById("files").click();
};
document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;

    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};
</script>

Thanks in advance

Answer 1

You can add id attribute to the link and complete the javascript with the following code:

document.getElementById("delete").onclick = function () {
  document.getElementById("image").src = null;
  document.getElementById("files").value = '';
  return false;
};

jsfiddle