JQuery append oly bekommen letzte Elemen in Schleife Schienen

Question

Hallo Leute, ich bin noob bei jquery und ich habe diese Probleme ich versuche, eine Bildvorschau anzuzeigen, wenn der Benutzer die Datei laden, fand ich einige Post aber kann es nicht funktionieren es nur zeigt das letzte Bild

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var counter = 0 
     var reader = new FileReader(); 
     var img = ''; 
     reader.onload = function (e) { 

      debugger 
      img.attr('src', e.target.result) 
      .width(150) 
      .height(150); 

      $('.test').append(img.clone()); 
      console.log(img); 
     } 

     for(var i=0; i< input.files.length; i++){ 
      img = $('<img id="dynamic'+i+'" style="margin-top : 5px; margin-right: 5px;">'); 
      reader.readAsDataURL(input.files[i]); 
      counter++; 
     } 

    } 
} 

Hier ist das ein Stück der haml Form

.form-group 
    = f.label :proyecto_imagenes, "Imágenes de proyecto", class: 'col-xs-2' 
    .col-xs-8 
     = f.file_field :imagenes, multiple: true 
     %br 
     .test 

Vielen Dank im Voraus

Answer 1

können Sie verwenden closure

function readURL(input) { 
 
    if (input.files && input.files.length > 0) { 
 
    for (var i = 0; i < input.files.length; i++) { 
 
     (function(i) { 
 
     var img = $('<img id="dynamic' + i + '" style="margin-top : 5px; margin-right: 5px;">'); 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
      img.prop('src', e.target.result).width(150).height(150).appendTo('.test'); 
 
     } 
 
     reader.readAsDataURL(input.files[i]); 
 
     })(i) 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" onchange="readURL(this)" multiple/> 
 
<div class='test'></div>

Answer 2

ich glaube, Sie Ihre Funktion auf ein Ereignis binden müssen. Etwas wie:

Bitte beachten Sie die Änderungen bemerken:

.form-group 
    = f.label :proyecto_imagenes, "Imágenes de proyecto", class: 'col-xs-2 file-input' 
     .col-xs-8 
     = f.file_field :imagenes, multiple: true 
     %br 
     #test 

Und dieses ist der Auslöser

$(function(){ 
    $(".file-input").change(function(){ 
     readURL(this); 
    }); 
}) 

Und Ihre Funktion:

var readURL = function(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#test').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

LE: Ich will dich nicht empfehlen Fügen Sie auch das Styling von Javascript hinzu, es sei denn, Sie haben keine andere Wahl.