Add more files separately using jquery [duplicate] - php

Question

This question already has answers here:
Multiple file upload in php
(14 answers)
Closed 5 years ago.
My users are able to add more files separately. Now I am able to add multiple files at once, but I can't choose other files it getting replace. When user added one file there should be option for add more files. How can I achieve this? Here I have added only uploading scripts for this form.
PHP
if($_FILES['fil_attachment']['name'] != '') {
#copy(
$_FILES['fil_attachment']['tmp_name'],
'uploads/'.$_FILES['fil_attachment']['name']
);
$attachment[0] = "uploads"."/".$_FILES['fil_attachment']['name'];
$file_name=$_FILES['fil_attachment']['name'];
}
HTML
<form
class="form-request"
name="frmRequest"
method="post"
action
enctype="multipart/form-data"
>
<input
name="MyFile"
type="hidden"
id="MyFile"
tabindex="99"
size="1" />
<input
type="file"
name="fil_attachment"
multiple
id="fil_attachment"
onChange="MyFile.value=fil_attachment.value" />
<input type="submit">
</form>

Answer 1

Please refer to the PHP manual section on uploading multiple files here:
http://php.net/manual/en/features.file-upload.multiple.php
Also, have a look at this existing question:
Multiple file upload in php

Answer 2

JavaScript and jQuery help you to select multiple upload item. Here is the code snippet
$(function() {
var countFiles = 1,
$body = $('body'),
typeFileArea = ['txt', 'doc', 'docx', 'ods'],
coutnTypeFiles = typeFileArea.length;
//create new element
$body.on('click', '.files-wr label', function() {
var wrapFiles = $('.files-wr'),
newFileInput;
countFiles = wrapFiles.data('count-files') + 1;
wrapFiles.data('count-files', countFiles);
newFileInput = '<div class="one-file"><label for="file-' + countFiles + '">Attach file</label>' +
'<input type="file" name="file-' + countFiles + '" id="file-' + countFiles + '"><div class="file-item hide-btn">' +
'<span class="file-name"></span><span class="btn btn-del-file">x</span></div></div>';
wrapFiles.prepend(newFileInput);
});
//show text file and check type file
$body.on('change', 'input[type="file"]', function() {
var $this = $(this),
valText = $this.val(),
fileName = valText.split(/(\\|\/)/g).pop(),
fileItem = $this.siblings('.file-item'),
beginSlice = fileName.lastIndexOf('.') + 1,
typeFile = fileName.slice(beginSlice);
fileItem.find('.file-name').text(fileName);
if (valText != '') {
fileItem.removeClass('hide-btn');
for (var i = 0; i < coutnTypeFiles; i++) {
if (typeFile == typeFileArea[i]) {
$this.parent().addClass('has-mach');
}
}
} else {
fileItem.addClass('hide-btn');
}
if (!$this.parent().hasClass('has-mach')) {
$this.parent().addClass('error');
}
});
//remove file
$body.on('click', '.btn-del-file', function() {
var elem = $(this).closest('.one-file');
elem.fadeOut(400);
setTimeout(function() {
elem.remove();
}, 400);
});
});
input {
display: none;
}
.files-wr {
padding: 20px;
}
.files-wr label {
margin-bottom: 20px;
border-bottom: 1px dashed #177cca;
position: relative;
display: inline-block;
color: #177cca;
font-size: 18px;
font-weight: 400;
cursor: pointer;
transition: all .2s;
}
.files-wr label:after {
content: '+';
width: 32px;
height: 32px;
border-radius: 5px;
background-color: #177cca;
position: absolute;
top: -4px;
right: -47px;
font-size: 18px;
line-height: 32px;
color: #fff;
text-align: center;
transition: all .2s;
}
.files-wr label:hover,
.files-wr label:active {
color: #77c639;
border-color: #77c639;
}
.files-wr label:hover:after,
.files-wr label:active:after {
background-color: #77c639;
}
.files-wr .one-file~.one-file label {
display: none;
}
.files-wr .one-file.error {
border: none;
}
.files-wr .one-file.error .file-name {
color: #ca4a17;
}
.files-wr .file-item {
position: relative;
margin-top: 4px;
display: flex;
align-items: center;
}
.files-wr .file-item.hide-btn {
display: none;
}
.files-wr .file-name {
font-size: 16px;
font-style: italic;
line-height: 26px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.files-wr .btn-del-file {
margin-left: 5px;
width: 16px;
min-width: 16px;
height: 16px;
line-height: 16px;
border-radius: 3px;
color: #fff;
text-align: center;
cursor: pointer;
transition: all .2s;
background-color: #177cca;
}
.files-wr .btn-del-file:hover,
.files-wr .btn-del-file:focus {
background-color: #ca4a17;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="files-wr" data-count-files="1">
<div class="one-file">
<label for="file-1">Attach file</label>
<input name="file-1" id="file-1" type="file">
<div class="file-item hide-btn">
<span class="file-name"></span>
<span class="btn btn-del-file">x</span>
</div>
</div>
</div>