Add more files separately using jquery

Question

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>

score 1 · Answer 1 · answered Aug 29 '17 at 11:45

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

answered Aug 29 '17 at 11:45

delboy1978uk

12,118
2
21
39

score 1 · Answer 2 · answered Aug 29 '17 at 12:13

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>

Add more files separately using jquery

2 Answers2