Question

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

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

我也会对表单数据进行序列化，但是没有工作。

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代码：

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

控制器代码：

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;

Answer 1

我认为没有必要单独序列化表单，如果您使用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');   
                        }
        });
    });

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

1 个答案: