jQuery Datei-Upload-Vorschau/entfernen Bild nicht richtig funktioniert

Question

Sie können die Arbeitsdatei finden Sie unter Jsfiddle

/* JavaScript */ 
 

 
function readURL() { 
 
\t var $input = $(this); 
 
    if (this.files && this.files[0]) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
      $input.next('.blah').attr('src', e.target.result).show(); 
 
      $input.after('<input type="button" class="delbtn" value="remove">'); 
 
     } 
 
     reader.readAsDataURL(this.files[0]); 
 
    } 
 
    } 
 

 
    $(".imgInp").change(readURL); 
 

 
    $("form").on('click', '.delbtn', function(e) { 
 
\t \t var $input = $(this); 
 
     $input.next('.blah').attr('src', e.target.result).hide(); 
 
     $input.prev('.imgInp').val(""); 
 
     $(this).closest(".delbtn").remove();  
 
});

<form name="" action="" method="post"> 
 
    <div class="div"> 
 
    <input type='file' class="imgInp blah" /> 
 
    <img class="blah" src="#" alt="your image"/></div> 
 
    <br> 
 
    <br> 
 
    <div class="div"> 
 
    <input type='file' class="imgInp" /> 
 
    <img class="blah" src="#" alt="your image"/></div> 
 
</form>

Anzeige und entfernen Bild fein arbeitet.

Aber wenn das Bild bereits ausgewählt und wieder ein anderes neues Bild auswählen, funktioniert die Vorschaufunktion nicht. Entferne den Knopf und füge ihn hinzu. Bitte überprüfen Sie das Fehlerbild unten.

Click to view the error

Answer 1

Ich habe Ihre fiddle auf folgenden Link aktualisiert,

https://jsfiddle.net/balasuar/97dzkf70/20/

Wenn er zum ersten Mal, wenn Sie die image auswählen, wird das nächste Element der Taste die image ist. Aber sobald das Bild ausgewählt wurde, haben Sie das Button-Element Remove neben dem Datei-Steuerelement hinzugefügt. Beim nächsten Mal bricht es, da das Bild nicht mehr neben der Dateikontrolle liegt.

Ich habe es unten mit einer reset Methode behoben, um dies zu beheben.

function readURL() { 
    var $input = $(this); 
    if (this.files && this.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      reset($input.next('.delbtn'), true); 
      $input.next('.blah').attr('src', e.target.result).show(); 
      $input.after('<input type="button" class="delbtn" value="remove">'); 
     } 
     reader.readAsDataURL(this.files[0]); 
    } 
} 

$(".imgInp").change(readURL); 

$("form").on('click', '.delbtn', function(e) { 
     reset($(this)); 
}); 

function reset(elm, prserveFileName){ 
    if(elm && elm.length > 0) { 
    var $input = elm; 
     $input.next('.blah').attr('src', '').hide(); 
     if(!prserveFileName){ 
      $input.prev('.imgInp').val(""); 
     } 
     elm.remove(); 
    } 
}