separat mehrere Dateien hinzufügen jquery mit

Question

Meine Benutzer können separat weitere Dateien hinzuzufügen. Jetzt kann ich mehrere Dateien gleichzeitig hinzufügen, aber ich kann keine anderen Dateien auswählen, die ersetzt werden. Wenn der Benutzer eine Datei hinzugefügt hat, sollte eine Option zum Hinzufügen weiterer Dateien vorhanden sein. Wie kann ich das erreichen? Hier habe ich nur Upload-Skripte für dieses Formular hinzugefügt.

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

entnehmen Sie bitte dem Handbuch Abschnitt PHP hier mehrere Dateien zum Hochladen: http://php.net/manual/en/features.file-upload.multiple.php

Auch haben einen Blick auf diese bestehenden Frage: Multiple file upload in php

Answer 2

JavaScript und jQuery Hilfe Sie mehrere Upload-Option auszuwählen. Hier ist der Code-Schnipsel

$(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>