Как загрузить несколько файлов с помощью перетаскивания и просмотра - PullRequest
Новая
       10

Как загрузить несколько файлов с помощью перетаскивания и просмотра

0 голосов
/ 11 мая 2019

Я использую этот код для загрузки файла, перетаскивания или просмотра.Код работает нормально, за исключением того, что я могу загружать только 1 файл за раз. 

<div class="container" >
    <input type="file" name="file" id="file">

    <!-- Drag and Drop container-->
    <div class="upload-area"  id="uploadfile">
        <h1>Drag and Drop file here<br/>Or<br/>Click to select file</h1>
    </div>
</div>

JQuery: 

$(function() {
    // Drag over
    $('.upload-area').on('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $("h1").text("Drop");
    });
    // Drop
    $('.upload-area').on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();

        $("h1").text("Upload");

        var file = e.originalEvent.dataTransfer.files;
        var fd = new FormData();

        fd.append('file', file[0]);
        uploadData(fd);
    });
    // Open file selector on div click
    $("#uploadfile").click(function(){
        $("#file").click();
    });

    // file selected
    $("#file").change(function(){
        var fd = new FormData();
        var files = $('#file')[0].files[0];

        fd.append('file',files);
        uploadData(fd);
    });
});

Запрос Ajax: 

function uploadData(formdata){

  $.ajax({
    url: 'upload.php',
    type: 'post',
    data: formdata,
    contentType: false,
    processData: false,

    success: function(data){
        $('.echo').html(data);
    }
  });
}

Php часть: 

/* Getting file name */
$filename = $_FILES['file']['name'];

/* Location */
$location = "uploads/".$filename;

/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
    echo 'Uploaded: ' . $filename;
}

Это прекрасно работает для одной загрузки за раз.

Как я могу заставить его работать для нескольких загрузок одновременно, перетаскивая и просматривая?

...