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

Question

我正在尝试在 CodeIgniter 中上传带有 file 字段的 form。我成功地将没有file 的表单数据插入数据库。但是当我尝试使用文件字段时，它会显示以下错误

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

我尝试了很多方法，例如 this forum thread 和 this SO question，但没有任何帮助。

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 ();
    }
}

Answer 1

我认为您必须在较新的浏览器上使用 FormData() 类才能使其正常工作。看到这个答案https://stackoverflow.com/a/5976031/860752

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

Answer 2

你可以使用下面的代码

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

希望对你有帮助

Answer 3

我使用upload library在codeigniter上传图片做了以下功能

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

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
        }
    }
}