Beigefügt mehrere Datei jquery

Question

Wie Sie mehr als ein Bild hochladen, habe ich multiple im Eingabebereich enthalten. Wenn Sie ein zweites Bild hochladen, wird das zuerst angefügte Bild entfernt.

<input name="images_post[]" id="files_post" size="27" type="file" multiple /> 

.

<input name="typeattach" type="hidden" id="typeattach" value="0"></span> 

jQ

  $('#files_post').click(function() {      
       $('#typeattach').val('1'); 
       $('#atach-value').val(''); 
      }); 

      $(':file').change(function() { 
       $('#num-files').text(this.files.length); 
      }); 

html

<span id="num-files">0</span> 

Wenn er zum ersten Dateien befestigt ist, angebracht ich zweite Dateien .. die erste Datei auf einmal fehlt.

Answer 1

Damit ein input mehrere Dateien akzeptiert, muss das Formular multipart/form-data für seinen Codierungstyp sein. Dann können Sie mehrere Dateien auswählen.

<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" --> 
<form method="post" action="upload-page.php" enctype="multipart/form-data"> 
    <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> 
</form> 

<ul id="fileList"></ul> 

Hier ist ein Skript diese mehrere Dateien verarbeiten zu testen:

var input = document.getElementById('filesToUpload'); 
var list = document.getElementById('fileList'); 

// Clears the file list if it currently has child nodes. 
while (list.hasChildNodes()) { 
    list.removeChild(ul.firstChild); 
} 

// For each file... 
for (var x = 0; x < input.files.length; x++) { 
    // ...Add it to the ul as a li element. 
    var li = document.createElement('li'); 

    li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; 
    list.append(li); 
} 

Nur der Vollständigkeit halber, auch wenn die bereits akzeptiert die Antwort ...

Wenn Sie versuchen, mach es so, dass die Dateiauswahlaufforderung mehrfach geöffnet werden kann, dann können mehrere Dateien ausgewählt werden, dann muss man etwas hacky sein. Ich glaube (zitieren Sie mich nicht), Sie können Dateien aus Sicherheitsgründen nicht aus mehreren Dateiaufforderungen auswählen. Wenn Sie die Liste der Dateien für den Upload nach der ersten Aufforderung halten, dann müssen wir:

• Blenden Sie die aktuell ausgewählten Dateien durch die input mit der Auswahl versteckt, sobald die Auswahl von Dateien gemacht worden ist,
• Erstellen Sie die aktuelle input für fortlaufende Uploads,
• Zeigen Sie die kumulative Liste der Dateien auf andere Weise,
• Laden Sie alle ausgeblendeten Eingaben, sobald das Formular übermittelt wird.

Etwas wie:

// Handles immediately after a file is selected 
$("input#files_post").change(function() { 
    var inputClone = this.clone(); 

    // Add to (hidden) list. 
    inputClone.appendTo("#file-catalog"); 

    // Reset element 
    this.remove(); 
    inputClone.appendTo("#file-upload-form"); 
}); 

// Handles what is uploaded on form submission 
$("file-upload-form").submit({ 
    // Get only the file-catalog elements, serialise for upload. 
    var fileParams = $("#file-catalog").find("*:form").serialize(); 

    $.ajax({ 
     url: 'http://dot.com/', 
     type: 'POST', 
     data: params, 
     success: function (data) { 
      console.log("Success! Info: " + data); 
     } 
    }); 
}); 

für die HTML:

<form id="file-upload-form"> 
    <input name="images_post[]" id="files_post" size="27" type="file" multiple /> 
    <div id="file-catalog" display="none"></div> 
</div> 

und der ursprüngliche Antwort des JS nutzen, mit ein paar Ausgaben werde ich Ihnen überlassen, ob Sie auflisten möchten die versteckten Dateien. Vielleicht wäre auch für diese Liste eine klare Taste:

$(".clear-button").click(function() { 
    $("#the-list-you-made-on-the-advice-above").empty(); 
    $("#file-catalog").empty(); 
}