javascript - 图片提交后如何取消预览?

标签 javascript jquery html

在我预览图像并提交后,该图像仍然保留在那里,并添加了消息评论。我希望图像预览在提交后自动删除。

这是我的 html 代码:

 function showPreview(objFileInput) {
      if (objFileInput.files && objFileInput.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
        $("#targetLayer").html('<img src="'+e.target.result+'" width="200px" height="200px" class="upload-preview" />');
        $("#targetLayer").css('opacity','0.7');
        $(".icon-choose-image").css('opacity','0.5');
        }
      fileReader.readAsDataURL(objFileInput.files[0]);
      }
    }

    $("#image_name").change(function(e) {
      showPreview(this);
    });  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="targetOuter">
      <div id="targetLayer"></div>
      <img src="photo.png"  class="icon-choose-image"  />
      <div class="icon-choose-image">
      <input name="image_name" id="image_name" type="file" class="inputFile"  />
      </div>
    </div>

最佳答案

//Target the image element and remove 
$(.icon-choose-image).remove();

关于javascript - 图片提交后如何取消预览?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56673429/

相关文章:

JavaScript 语法错误 : Unexpected token ILLEGAL

jQuery通过data属性find()元素,其值为object

javascript - chop 文本并根据需要恢复它

html - Div 定位(y 轴)与之前的 div y 轴位置相同,不需要的行为

html - 防止在html中以空格分隔的中文文本换行

javascript - 如何正确解决jquery冲突

php - jQuery .ajax() 方法

javascript - 从另一个对象数组创建一个对象数组

javascript - 随机化数组以激活函数

javascript - 如果以编程方式启动提交,则提交事件不会触发