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

时间:2014-10-18 14:14:15

标签: ajax codeigniter file-upload

我是 codeigniter 的新用户,并尝试上传form字段file。我成功地将没有file的表单数据插入到数据库中。但是当我尝试使用文件字段

时,它会显示以下错误
`<p>You did not select a file to upload.</p>`

我尝试了很多方法,例如https://www.daniweb.com/web-development/php/threads/477646/codeigniter-upload-form-with-ajaxCodeIgniter, Jquery Ajax, Form Submission and File Upload

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

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 个答案:

答案 0 :(得分:0)

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

或使用与此http://blueimp.github.io/jQuery-File-Upload/index.html

类似的第三方插件

答案 1 :(得分:0)

您可以使用以下代码

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

我希望你觉得它很有用

答案 2 :(得分:0)

我使用codeigniter

upload library中为上传图片执行了以下功能

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

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