Anfügen Element Eingangssteuer

Question

I Zwei Eingabetasten, die Benutzer erlauben, Dateien

<input type="file" id="fileUpload" name="files" multiple><br/>           
<div id="selectedFiles"></div> 

in die SelectedFiles div ich eine Liste von Dateinamen anhängen hochladen:

$('input:file').on('change', function() { 
    //$('.file').bind('change', function() { // is duprecated 
    var files = this.files; 
    var listOfFiles = []; 

    for(var i=0; i < files.length; i++) { 
     //var filename = files[i].name + "<br />"; 
     //$("#selectedFiles").append(filename); 
     listOfFiles.push(files[i].name); 
    } 

    $('#selectedFiles').append(listOfFiles.join("<br />")); 
}); 

Was muss ich tun ist die Liste der Dateien unter jeder Schaltfläche anhängen. irgendeine Idee, wie man das macht?

Answer 1

Ersetzen Sie $('#selectedFiles').append durch $(this).after. Wahrscheinlich sollten alle Dateien in eine Liste für Sauberkeit verpackt werden. Hier ist eine bessere Art und Weise:

$(this).after('<ul><li>' + listOfFiles.join('<li>') + '</ul>') 

Hier ist der endgültige Code (Ich reinigte es ein wenig nach oben):

$(function() { 
    $('.upload_files_input').on('change', function() { 
    var file_names = Array.prototype.slice.call(this.files).map(function(file) { 
     return file.name; 
    }); 
    $(this).after('<ul><li>' + file_names.join('<li>') + '</ul>'); 
    }); 
});