mark1970 mark1970 - 4 months ago 10
HTML Question

Attached multiple file jquery

How to upload more than one images, I have included

multiple
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>


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>


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

Answer

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

<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()) {
    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);
}