使用Jquery File Upload上传multipart formData

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Jquery File Upload上传multipart formData相关的知识,希望对你有一定的参考价值。

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

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

        });

解决了我的所有问题。

以上是关于使用Jquery File Upload上传multipart formData的主要内容,如果未能解决你的问题,请参考以下文章

jQuery File Upload文件上传插件简单使用

使用 Jquery File Upload 上传大(ish)文件

jQuery文件上传插件jQuery Upload File 有上传进度条

使用 cypress-file-upload 将文件上传到 jQuery.filer 不起作用

使用Jquery File Upload上传multipart formData

jQuery File Upload 单页面多实例的实现