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('');

删除上传的图片

1 个答案: