mark1970 mark1970 - 1 year ago 120
HTML Question

Attached multiple file jquery

How to upload more than one images, I have included

in the input area.
When upload second images, the first attached is removed.

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


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


$('#files_post').click(function() {

$(':file').change(function () {


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

When first files is attached, I attached second files.. the first file suddenly missing.

Answer Source

To have an input accept multiple files, the form must be multipart/form-data for its encoding type. Then you may select multiple files.

<!-- 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="" />

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

Here's a script to test out handling those multiple files:

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

// Clears the file list if it currently has child nodes.
while (list.hasChildNodes()) {

// 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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download