Question

以下是我从互联网上复制的代码，用于在上传到服务器之前显示图像的预览。如果我点击上传图片，它会触发输入元素上的点击事件并上传图片。同样，如果我想要删除我想从输入元素或网络存储本身中删除它，我想只删除该特定图像，以便服务器不会处理它。

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

提前致谢

Answer 1

您可以在链接中添加id属性，并使用以下代码完成javascript：

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

jsfiddle

Javascript：从浏览器中删除图像

1 个答案: