使用Codeigniter通过JQuery AJAX一起发送FormData和上传文件？

I am uploading file through Ajax using codiegniter but i also want to send from data and get it on controller and perform on it.

我使用codiegniter通过Ajax上传文件,但我也希望从数据发送并在控制器上获取并执行它。

file uploading is working but can't get other form data.

文件上传工作但无法获取其他表单数据。

I also serialize form data but didn't work.

我也序列化表单数据但没有工作。

Html Code :

Html代码:

<form action="<?php echo site_url("admin_panel/upload_project_image") ?>" id="form-upload">

<input type="hidden" name="project_id" id="project_id" value="<?=$project_details->ID;?>">
              <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                <div class="form-control" data-trigger="fileinput" style="margin:3px"> <i class="glyphicon glyphicon-file fileinput-exists"></i>
                  <span class="fileinput-filename"></span>
                </div>
                <span class="input-group-addon btn btn-default btn-file" style="margin:3px">
                  <span class="fileinput-new"> <i class="glyphicon glyphicon-paperclip"></i>
                    Select file
                  </span>
                  <span class="fileinput-exists">
                    <i class="glyphicon glyphicon-repeat"></i>
                    Change
                  </span>
                  <input type="file" name="file[]" multiple id="file"></span>
                <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput" style="margin:3px">
                  <i class="glyphicon glyphicon-remove"></i>
                  Remove
                </a>
                <a href="#" id="upload-btn" class="input-group-addon btn btn-success fileinput-exists" style="margin:3px">
                  <i class="glyphicon glyphicon-open"></i>
                  Upload
                </a>
              </div>
            </form>

Jquery Code :

Jquery代码:

$('#upload-btn').on('click', function(event) {
        var filesToUpload = inputFile[0].files;
        var projectID = $('#project_id').val();
        if (filesToUpload.length > 0) {
            var formData = new FormData();

            for (var i = 0; i < filesToUpload.length; i++) {
                var file = filesToUpload[i];

                formData.append("file[]", file, file.name);             
            }
            var other_data = $('#form-upload').serializeArray();
            $.each(other_data,function(key,input){
                formData.append(input.name,input.value);
            }); 
            $.ajax({
                url: uploadURI,
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data);
                    listFilesOnServer();
                },

Controller Code:

function upload_project_image() {
        if (!empty($_FILES)) {
            $this->load->library('upload');
            $config['upload_path'] = "./assets/uploads";
            $config['allowed_types'] = 'gif|jpg|png|mp4|ogv|zip';
            $this->upload->initialize($config);
            $this->load->library('upload', $config);
            if (!is_dir($config['upload_path'])) {
                mkdir($config['upload_path'], 0777, true);
            }

            $files = $_FILES;
            $project_id = $_POST['projectID'];
            echo $project_id . "--ID";
            $number_of_files = count($_FILES['file']['name']);
            $errors = 0;

1 个解决方案

#1

I think there is no need to serialize the form separately, if you use FormData then try following-

我认为没有必要单独序列化表单,如果您使用FormData然后尝试以下 -

 // this is what i am using to  upload file and forms data with in the form
 $(document).on('submit','#form-upload',function(){
        var formData=new FormData($('#form-upload')[0]);
        $object=$(this);
        $.ajax({
            url     :   $($object).attr('action'),
            type    :   'post',
            data    :   formData,
            processData:false,
            contentType:false,
            success :   function(responseText)
                        {
                            alert('uploaded successfully');
                            // do what ever you want with responseText
                        },
            error   :   function(e)
                        {
                            alert('hello from here');   
                        }
        });
    });