使用ajax codeigniter上傳文件總是NULL

Question

我在使用 Ajax 和 Codeigniter 上傳文件時遇到問題。 我讀過 base64 編碼我需要的東西。 但是這段代碼適用於較低版本的 codeingiter 和 PHP。 我不知道問題出在哪里。 上傳文件時，我總是有一個錯誤“您沒有選擇要上傳的文件”。

似乎是什么問題？

提前致謝。

控制器

public function do_upload()
    {
    $this->load->library('upload'); //call codeigniter upload library

        //upload configurations
        $base_path = 'uploads';
        $config['upload_path']  = $base_path;
        $config['allowed_types']= 'jpg|jpeg|png|bitmap|pdf|docx|doc';
        $config['max_size']     = 0;

        $this->upload->initialize($config);

        if(!$this->upload->do_upload('user_pic')){
            //if upload does not meet the configuration settings throw error.
            $error = array('error' => $this->upload->display_errors());
            echo '<pre>';
            print_r($error);
            echo '</pre>';
        }else {
            //proceed upload
            $data = array(
                'uploaded_data' => $this->upload->data()
            );

            $file_name  = $data['uploaded_data']['file_name'];

        }
        }

阿賈克斯

    $(function() {
 $("#edit_prof").validate({
    rules: {
        firstname: {
            lettersAndNumbersAndSpacesOnly: true,
            maxlength: 50,
            required: true
        },
        middlename: {
            lettersAndNumbersAndSpacesOnly: true,
            maxlength: 50,
            required: true
        },
        lastname: {
            lettersAndNumbersAndSpacesOnly: true,
            maxlength: 50,
            required: true,
        },
        user_pic: {
            maxlength: 250,
            extension: 'gif|jpg|jpeg|png'
        }
    },
   highlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');         
    },
    unhighlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
    },
    errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.length) {
                error.insertAfter(element);
            } else {
            error.insertAfter(element);
            }
        },
    submitHandler: function() {

    var url = "<?php echo site_url('user/user_profile/do_upload')?>";
    var form = $('#form')[0];
    var formData = new FormData(form);

    console.log($('#user_pic').val());
    // ajax adding data to database
 $.ajax({
    url: url,
    data: formData,
    type: "POST", //ADDED THIS LINE
    dataType: "JSON",
    // THIS MUST BE DONE FOR FILE UPLOADING
    contentType: false,
    processData: false,
    // ... Other options like success and etc
        success: function(data)
        {

            if(data.status) //if success close modal and reload ajax table
            {
            $('#edit_prof').validate('resetForm', true);
                $( "#message" ).text('Your Profile has been changed. Please re-login to update your profile details.').show();
                setTimeout(function(){
                    $( "#message" ).fadeOut();
                }, 1500);
            }

        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            //alert('Error adding / update data');
            $( "#message" ).append("<div class='alert alert-danger'><strong>Something went wrong! Please refresh the page.</strong></div>");
                setTimeout(function(){
                $('#message').slideUp('slow').fadeOut(function() {
                 });
                }, 1500);

        }
    });
    return false;
    }

    });
  });

HTML 視圖

        <form enctype="multipart/form-data" id="edit_prof" class="form-horizontal">
            <fieldset>

                <div class="form-group">
                <label for="cpassword" class="col-sm-4 control-label">Change Photo</label>
                <div class="col-sm-5">
                  <input type="file" id="user_pic" name="user_pic" class="form-control input-file" placeholder="Picture" style="font-size:15px;">
                </div>
                </div>

                <div class="form-group">
                <div class="col-sm-offset-4 col-sm-8">
                    <input type="hidden" name="user_profile" id="user_profile" value="<?php //echo $profile_pic; ?>" /> 
                  <button type="submit" class="btn btn-primary"> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes </button>

                </div>
                </div>
            </fieldset>
        </form>

Answer 1

我最近也處於類似的情況。 我希望我的回答有點幫助。 :)

---

第 1 步。檢查您的 Jquery 版本

• 我的案例：1.xx 也不起作用（POST/GET 為 NULL）

• 請下載最新版本

---

步驟 2. 測試“$_FILE”

// HTML

<form enctype="multipart/form-data" id="edit_prof" class="form-horizontal">
    <div>
        <img id="Thumbnail" src="noimg.jpg">
    </div>

    <fieldset>
        <div class="form-group">
            <label for="cpassword" class="col-sm-4 control-label">Change Photo</label>
            <div class="col-sm-5">
                <input type="file" id="user_pic" name="user_pic" class="form-control input-file" placeholder="Picture" style="font-size:15px;">
                <input type="text" id="user_memo" name="user_memo" class="form-control input-file" style="font-size:15px;">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <input type="hidden" name="user_profile" id="user_profile" value="<?php //echo $profile_pic; ?>"/>
                <span onclick="formSubmit();" class="btn btn-primary"><i class="glyphicon glyphicon-ok-sign"></i> Save Changes</span>
            </div>
        </div>
    </fieldset>
</form>

// JS

<script>
    function formSubmit () {
        var form = $("#edit_prof")[0];
        var formData = new FormData (form);
        var FileInfo = $ ("input[name='user_pic']")[0].files[0];

        formData.append ("user_memo", $ ('input[name="user_memo"]').val ());
        formData.append ("file", FileInfo);

        $.ajax ({
            url: "Codeigniter URL"
            , type: "POST"
            , dataType: 'text'
            , cache: false
            , processData: false
            , contentType: false
            , data: formData
            , beforeSend: function ()
            {
                $('input[name="user_pic"]').hide();
                $('input[name="user_memo"]').hide();
            }
            , success: function (getData)
            {
                console.log(saveImgUrl);
                if(saveImgUrl.length > 0)
                {
                    $('#Thumbnail').attr('src', saveImgUrl);
                }

                $('input[name="user_pic"]').show();
                $('input[name="user_memo"]').show();
            }
        });
    }
</script>

// PHP(codeigniter 3.x)

    public function imgUpload()
    {
        $POST_ALL = $this->input->post();
        $FILE_ALL = $_FILES;

        // Image Process - Start

        // Image Process - End

        // echo var_dump($POST_ALL);
        echo var_dump($FILE_ALL);
    }