2015-04-22 30 views
5

Bu Javascript kodunu "kaldır" bağlantısını tıkladığımda yapmak istiyorum, görseli kaldır. Lütfen bana yardım et.Görüntüyü kaldırmak için Javascript kodu kaldır

<script> 
function previewFile(){ 

    var preview = document.querySelector('img'); 
    var file = document.querySelector('input[type=file]').files[0]; 
    var reader = new FileReader(); 

    reader.onloadend = function() { 
     preview.src = reader.result; 
    } 
    if (file) { 
     reader.readAsDataURL(file); 
    } else { 
     preview.src = ""; 
    } 
} 

    previewFile(); 

</script> 

<input type="file" onchange="previewFile()"><br> 
<img src="" height="200" alt="Image preview..."> 
<a href="#">remove image </a> 

    </body> 
</html> 
+1

Neden olmasın sadece 'img' elemanını gizlemek mi? – Kane

+2

Sadece görüntü öğesini gizleyin veya kaynağını başka bir şeye değiştirin. Ya da hiçbir şey. – piggy

+0

Hayal gücünü gizlemeyi de istedim – user3732708

cevap

1
<img id='image' src="" height="200" alt="Image preview..."> 
<a id='remove' href="#">remove image </a> 

<script> 
$(function rmv() { 
    $('#remove').click(function() { 
      $('#image').remove(); 
     } 

}); 
</script> 
+0

Görüntüyü kaldırmaz, gizler. JQuery'nin (veya javascript'inin) kaldır işlevini kullanmalısınız. $ ('# myImage'). Remove(); Eski görüntü yolunuzu korumak istiyorsanız, "imageCache" adlı bir dizi oluşturmayı ve kullanıcının o sitede gördüğü resmi tutmasını öneriyorum. Böylece, animasyonda kolayca animasyon yapabilirsiniz. gizli görüntünüzü "açığa çıkarmak" riski olmadan, görüntüde. –

+0

(S) Bir jQuery çözümü – sroes

+0

soran istemiyordum ben de gizlenmiş görüntü yolunu kaldırmak istiyorum. – user3732708

0

<input type="file" onchange="previewFile()"><br> 
<div id="imgDiv"> <img id="image1" src="" height="200" alt="Image preview..."></div> 
    <a href="#">remove image </a> 

     </body> 
    </html> 

<script> 
function previewFile() { 

    var d = document.getElementById('imgDiv'); 

    var olddiv = document.getElementById("image1"); 

    d.removeChild(olddiv); 

} 

</script> 
0
<img src="" id="image" height="200" alt="Image preview..."> 
<a href="#" onclick="foo()">remove image </a> 

JS div img öğesi tutun ve bu elemanın her iki kimlik atayın:

function foo(){ 
    var image = document.getElementById("image"); 
    if (image != null) 
    { 
      image.parentNode.removeChild(image); 
    } 
} 
1

Bunu img için id öznitelik eklemek yapamıyorsanız, ham javascript ile böyle kaldırabilirsiniz - bu görüntü aralarında yalnızca bir metin düğümü için izin doğrudan çapa etiketi önceki varsayar:

function removeImage(el){ 
    if(!el.previousSibling.tagName){//if it is textnode like newline etc. we go one back 
     var el = el.previousSibling; 
    } 
    if(el.previousSibling.tagName && el.previousSibling.tagName=='IMG'){ 
     el.previousSibling.remove(); 
    } 
} 

<img src="" height="200" alt="Image preview..."> 
<a href="#" onclick="removeImage(this);">remove image</a> 
İlgili konular