如何使用拖放和浏览上传多个文件

I am using this code for uploading a file, drag & drop or browse. The code works fine, except, I can only upload 1 file at a time.

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

The 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);
    });
});

The ajax request:

function uploadData(formdata){

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

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

The php part:

/* 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;
}

This works all fine for 1 single upload at a time.

How can I make it work for multiple uploads at the same time, by drag & drop and browse?