Question

我正在使用此代码来上传文件，拖放或浏览。该代码工作正常，但我一次只能上传1个文件。

:precision

jquery：

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

ajax请求：

$(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);
    });
});

php部分：

function uploadData(formdata){

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

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

这一次一次只能上传1次，效果很好。

如何通过拖放和浏览使其同时用于多个上传？

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

0 个答案: