javascript - 删除上传的图像

Question

我可以使用以下 HTML 代码和函数上传图像并进行预览。但是在我选择图片并预览之后，我不想真正上传图片，我想重置整个表格。

我怎样才能删除上传的图片？

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);
});

请大家帮帮我!

Answer 1

Subham，您使用的 JS 代码没有将您的图像上传到服务器。它只是将您选择的图像转换为 BASE64 并将其显示在图像标签上。如果你想从预览中删除该图像，只需重置图像的 src 标签，如:

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

或

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

并从输入类型图像中删除所选图像:

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