使用Jquery File Upload上传multipart formData

Posted 2021-05-06

我有一个表单，在里面我有两个输入字段，一个是文件类型（用于多个文件），另一个是日期。

$('#uploadForm').fileupload({
       
      //  formData: {adminDate: $( "#adminDate" ).val()},
        add: function (e, data) {     
            data.url = 'http://localhost/myProject/upload';
            $.each(data.files,function(index,file){
                $('<p/>').text(file.name).appendTo("#fileList");
            }); 
            
            $("#btnSubmit").off('click').on('click', function () {
                $("#bx_loader").removeClass('hidden');               
                $('#upload-parent-div').css("display", "block");           
                
                data.submit();
                resetProgressbar();
                
            });
        },
        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            console.log(progress);
            $('<p/>').text(progress + '%');
        },
           
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo("#fileList");
            });
        }
    });
   $( "#adminDate" ).datepicker({
   //dateFormat: 'dd/mm/yy',
     dateFormat: 'yy-mm-dd',
     showButtonPanel: true,
     changeMonth: true,
     changeYear: true
   });

<form id="uploadForm" class="uploadForm" action="upload" method="post" enctype="multipart/form-data">

        <div class="form-group col-sm-offset-2">
            <label class="control-label col-sm-2">Input Data File:</label>
            <div class="col-sm-5">
                <input type="file" name="files[]" id="fileupload" class="file form-control" accept=".csv,.zip" multiple required>
                <div class="help-block help-block-error "></div>                                                               
            </div>
        </div>
        <div class="form-group col-sm-offset-2">
            <label class="control-label col-sm-2">Date:</label>
            <div class="col-sm-5">
                <input type="text" name="adminDate" id="adminDate" class="adminDate form-control"  required>
                <div class="help-block help-block-error "></div>
            </div>
        </div>
        <div class="form-group col-sm-offset-2">
            <label class="control-label col-sm-2">Files:</label>
            <div class="col-sm-5" id="fileList">
            </div>
        </div>
        <div class="form-group col-md-12 text-center">
            <button type="submit" id="btnSubmit" class="btn btn-success">Submit & Export</button>
            <img id="bx_loader" class="hidden" src = "<?php echo Url::base() ?>/images/bx_loader.gif" />
        </div>


    
    </form>

我想在点击提交和导出按钮时提交此表单。我可以看到我的上传功能已成功通话

 public function actionUpload(){

    //echo 'takjsdf;ljasd;fl';exit;


    if(!empty($_FILES)) {
        $_SESSION['adminDate'] = $_POST['adminDate'];
        echo '<pre>' ;
        print_r($_FILES['files']);
        echo '</pre>';

    }


}

问题是我只能在$ _FILES数组中获取最后选择的文件，我希望获得所有文件以及日期。另外，我想用单独的进度条（对于每个选定的文件）实现文件上传，但我坚持这一点。

我还看了一下demo jquery文件上传插件，可以看到尽可能多的ajax请求作为选择的文件数，但我无法在我的代码中实现。

我该如何解决这个问题？

答案

这部分代码是将其转换为的问题

 $("#btnSubmit").on('click', function () {
            $("#bx_loader").removeClass('hidden');               
            $('#upload-parent-div').css("display", "block");           

            data.submit();
            resetProgressbar();

        });

解决了我的所有问题。