使用ajax在codeigniter中上传带有图像的表单

I am new in codeigniter and trying to upload a form with file field. I successfully insert the form data without file to database. But it shows below error when I try with the file field

我是codeigniter的新手,并尝试上传带有文件字段的表单。我成功地将没有文件的表单数据插入数据库。但是当我尝试使用文件字段时,它会显示以下错误

`<p>You did not select a file to upload.</p>`

I tried many ways like https://www.daniweb.com/web-development/php/threads/477646/codeigniter-upload-form-with-ajax and CodeIgniter, Jquery Ajax, Form Submission and File Upload

我尝试了很多方法,如https://www.daniweb.com/web-development/php/threads/477646/codeigniter-upload-form-with-ajax和CodeIgniter,Jquery Ajax,表单提交和文件上传

But nothing helps me. My file are(relevent fields for file upload). Please help me.. Thanku in advance

但没有什么能帮助我。我的文件是(文件上传的相关字段)。请帮帮我..提前谢谢

view_add_author.php

<?php
                $this->load->helper('form');
                echo form_open_multipart('admin/form_actions/add_author', 'id="add_author_form"');
                ?>
<div class="form-group">
    <label for="author_image">Image</label>
    <input type="file" name="author_image" id="author_image">
    <p class="help-block">Format(jpg, jpeg, gif, png)</p>
</div>

custom.js

function add_author(data){
return $.ajax({
    url: url+'admin/form_actions/add_author',
    type: 'POST',
    async: false,
    dataType: 'json',
    mimeType:"multipart/form-data",
    data: data
});
}


$('#add_author_form').submit(function(e){
    e.preventDefault();
    var data = $('#add_author_form').serialize();
    add_author(data).done(function(data){
        if(data.msg != '')
        {
            $('#add_author_form')[0].reset();
            alert(data.msg);
        }
        else if(data.error != '')
        {
            alert(data.error);
        }
    });
});

form_actions.php

public function add_author ()
{
    $this -> load -> helper ( 'form' );
    $config = array (
        'upload_path' => './images/author/',
        'allowed_types' => 'gif|jpg|jpeg|png',
        'max_size' => '2000',
        'max_width' => '2000',
        'max_height' => '2000',
        'encrypt_name' => true,
    );

    $this -> load -> library ( 'upload', $config );

    if ( ! $this -> upload -> do_upload ( 'author_image' ) )
    {
        echo $error = $this -> upload -> display_errors ();
    }
    else
    {
        echo $data = $this -> upload -> data ();
    }
}

3 个解决方案

#1

I think you have to use the FormData() class on newer browsers to get it working. See this answer https://*.com/a/5976031/860752

我认为您必须在较新的浏览器上使用FormData()类才能使其正常工作。请参阅此答案https://*.com/a/5976031/860752

Or use a third party plugin similar to this http://blueimp.github.io/jQuery-File-Upload/index.html

或者使用与此类似的第三方插件http://blueimp.github.io/jQuery-File-Upload/index.html

#2

you can use below code

你可以使用下面的代码

 $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#add_author_form).ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });

I hope you find it helpful

我希望你觉得这对你有帮助

#3

I did the below function for upload image in codeigniter using the upload library

我使用上传库在codeigniter中为上传图像执行了以下功能

By using this function, i can add single/multiple file

通过使用此功能,我可以添加单个/多个文件

function add_image ( $path, $field ) //upload and the file field name
{
    $config = array (
        'upload_path' => $path,
        'allowed_types' => 'gif|jpg|jpeg|png',
        'max_size' => '1024',
        'max_width' => '1024',
        'max_height' => '1024',
        'encrypt_name' => TRUE
    );
    $this->load->library ( 'upload', $config ); //load codeigniter libraries
    $name_array = array ();
    $count = count ( $_FILES[ $field ][ 'size' ] );
    if ( count ( $_FILES[ $field ] ) == count ( $_FILES[ $field ], COUNT_RECURSIVE ) ) //if only one image is present
    {
        if ( !$this->upload->do_upload ( $field ) )
        {
            return FALSE;
        }
        $data = $this->upload->data ();
        return $data[ 'file_name' ]; //return the uploaded file name
    }
    else //if multiple images selected
    {
        foreach ( $_FILES as $key => $value )
        {
            for ( $s = 0; $s < $count; $s++ )
            {
                $_FILES[ 'userfile' ][ 'name' ] = $value[ 'name' ][ $s ];
                $_FILES[ 'userfile' ][ 'type' ] = $value[ 'type' ][ $s ];
                $_FILES[ 'userfile' ][ 'tmp_name' ] = $value[ 'tmp_name' ][ $s ];
                $_FILES[ 'userfile' ][ 'error' ] = $value[ 'error' ][ $s ];
                $_FILES[ 'userfile' ][ 'size' ] = $value[ 'size' ][ $s ];
                if ( $this->upload->do_upload () )
                {
                    $data = $this->upload->data ();
                    $name_array[ ] = $data[ 'file_name' ];
                }
                else
                {
                    return FALSE;
                }
            }
            return $name_array;//return the names of images uploaded
        }
    }
}

#1