Question

例如我有这个表格

<form>
 <input type='file' id="imgInp" />
 <img id="blah" src="#" alt="your image" />
</form>

这个脚本显示图像

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

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

我想按一个按钮删除所选图像，例如：

<a href="#">remove</a>

我们怎么做？

DEMO

Answer 1

创建＆＃34;删除＆＃34;以最初隐藏的形式链接。

<form>
  <input type='file' id="imgInp" />
  <a style="display:none;" id="removeImage" href="#">Remove</a>
  <img id="blah" src="#" alt="your image" />
</form>

在javascript文件中，

 $("#imgInp").change(function() {
   readURL(this);
   $("#removeImage").toggle(); // show remove link
 });

 $("#removeImage").click(function(e) {
   e.preventDefault(); // prevent default action of link
   $('#blah').attr('src', ""); //clear image src
   $("#imgInp").val(""); // clear image input value
   $("#removeImage").toggle(); // hide remove link.
 });

如何从html输入中删除所选图像

1 个答案: