Question

我不是javascript或html专家。我知道非常基本。

这是我的代码，我点击图像打开文件选择器，我选择新图像，这将它附加到以前的图像。这工作正常但我需要用前一个替换图像而不是追加。感谢是否有人可以调整它，因为我不知道该怎么做：

<div id="current-user"></div>
<br>
<input type="file" id="choose" multiple src="/logo.png" />

<script>
function readImage(file) {

    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
        image.src    = _file.target.result;              // url.createObjectURL(file);
        image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size/1024) +'KB';
            $('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };      
    };

}
$("#choose").change(function (e) {
    if(this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
</script>

修改

我可以处理我的页面以显示图像并将其附加到上一张图像。但我需要删除以前的图像并添加新图像。我习惯使用replaceWith（）和replcaAll（）的方法，但它们不起作用。

Answer 1

而不是：

$('#uploadPreview').append(...

使用：

$('#uploadPreview').html(...

使用html()方法替换#uploadPreview元素

中的所有内部HMTL内容

Answer 2

您可以更改@Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_single_post); fixNestedScrollViewScrolling(); // some other stuff here ... }元素的src属性，这在我看来很简单：

img

通过这种方式，您还可以更改其他属性的值。

Answer 3

不要清空父母：

$('#uploadPreview').empty(); //don't use this

只是做：

$('#uploadPreview').find("img").attr("src",this.src); //then you don't need to set height and width again

或者按照以下代码段进行操作：

＆＃13;

$("#image").on("click", function() {
  $(this).attr("src", "http://sd.keepcalm-o-matic.co.uk/i/keep-calm-its-already-done.png")
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <img id="image" src="http://i.imgur.com/W3FNHHH.png" height=200 width=200>


</div>

＆＃13;

Answer 4

我实际上是在添加图片之前添加以下行：

$('#uploadPreview').empty();

如何通过单击图像替换页面上的图像与另一个图像？

4 个答案: