如何使用ajax在codeigniter中上传图像?

时间:2018-03-22 04:35:03

标签: php jquery ajax codeigniter jquery-ui

我使用jQuery模式和Ajax为我的表单提交数据和文件,但我不知道如何使用文件上传类在根文件夹中上传我的文件和图像。任何一个告诉我在哪里我必须在我的代码中添加带有ajax的上传功能。我真的需要这个。我已经完成了这些更改。

下面我附上了我的模态代码和查看代码供你参考:

型号代码:     

  function __construct()  
      {  
         // Call the Model constructor  
         parent::__construct();  
         $this->load->database();  
      }  

public function getAll(){
    $this->db->select('*');
    $this->db->from('emp');
    $this->db->limit(50);
    $this->db->order_by('id','ASC');
    $query = $this->db->get();

    return $query->result();
  }

public function get($id){
    $query = $this->db->get_where('emp',array('id'=>$id));
    return $query->row_array();
  }



 public function save(){

         $config['upload_path']   = './uploads/'; 
         $config['overwrite']     =  TRUE;
         $config['allowed_types'] = 'gif|jpg|png|jpeg|pdf|txt|sql'; 
         $config['max_size']      = 8048000; 
         $config['max_width']     = 1024; 
         $config['max_height']    = 768;  
         $this->load->library('upload', $config);
         if ( $this->upload->save('userfile')) {

$data = array('upload_data' => $this->upload->data());       

    $Firstname      =   $this->input->post('Firstname');
    $Lastname       =   $this->input->post('Lastname');
    $Email          =   $this->input->post('Email');
    $Phone          =   $this->input->post('Phone');
    $Address        =   $this->input->post('Address');
    $Password       =   $this->input->post('Password');
    $Status         =   $this->input->post('Status');
    $Createddate    =   $this->input->post('Createddate');
    $Updateddate    =   $this->input->post('Updateddate');
    $File           =   $data['upload_data']['file_name'];
    // print_r($File);
    // die;
    $data = array(
      'Firstname'   =>  $Firstname,
      'Lastname'    =>  $Lastname,
      'Email'       =>  $Email,
      'Phone'       =>  $Phone,
      'Address'     =>  $Address,
      'Password'    =>  $Password,
       'Status'     =>  $Status,
      'Createddate' =>  $Createddate,
      'Updateddate' =>  $Updateddate,
      'File'        =>  $File
    );

    // print_r($data);die;

    $this->db->insert('emp',$data);
         }

}


public function update(){
    $id             =   $this->input->post('id');
    $Firstname      =   $this->input->post('Firstname');
    $Lastname       =   $this->input->post('Lastname');
    $Email          =   $this->input->post('Email');
    $Phone          =   $this->input->post('Phone');
    $Address        =   $this->input->post('Address');
    $Password       =   $this->input->post('Password');
    $Status         =   $this->input->post('Status');
    $Createddate    =   $this->input->post('Createddate');
    $Updateddate    =   $this->input->post('Updateddate');
    $File           =   $this->input->post('File');
    $data = array(
      'Firstname'   =>  $Firstname,
      'Lastname'    =>  $Lastname,
      'Email'       =>  $Email,
      'Phone'       =>  $Phone,
      'Address'     =>  $Address,
      'Password'    =>  $Password,
       'Status'     =>  $Status,
      'Createddate' =>  $Createddate,
      'Updateddate' =>  $Updateddate,
      'File'        =>  $File
    );
    $this->db->where('id',$id);
    $this->db->update('emp',$data);
  }

}
?>

查看代码:

<html lang="en-US">
  <head>
    <title>Emp Details</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
   <!-- <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bgiframe/2.1.2/jquery.bgiframe.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <style>
        body { font-size: 75%; }
        label, input { display:block; width:120%; }
        input.text { margin-bottom:12px; width:150%; padding: .10em; }
        h1 { font-size: 1.2em; margin: .3em 0; }
        a{text-decoration:none;}
        {font-size:30%};
    </style>
    <script>
    $(document).ready(function() {

        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-confirm" ).dialog({
            autoOpen: false,
            resizable: true,
            height:150,
            modal: true,
            hide: 'Slide',
            buttons: {
                "Delete": function() {
                    var del_id = {id : $("#del_id").val()};
                    $.ajax({
                        type: "POST",
                        url : "<?php echo site_url('Employee_controller/delete')?>",
                        data: del_id,
                        success: function(msg){
                            $('#show').html(msg);
                            $('#dialog-confirm' ).dialog( "close" );
                            //$( ".selector" ).dialog( "option", "hide", 'slide' );
                        }
                    });

                    },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

        $( "#form_input" ).dialog({
            autoOpen: false,
            height: 450,
            width: 450,
            modal: false,
            hide: 'Slide',
            buttons: {
                "Add": function() {
                    var form_data = {
                        id:          $('#id').val(),
                        Firstname:   $('#Firstname').val(),
                        Lastname:    $('#Lastname').val(),
                        Email:       $('#Email').val(),
                        Phone:       $('#Phone').val(),
                        Address:     $('#Address').val(),
                        Password:    $('#Password').val(),
                        Status:      $('#Status').val(),
                        Createddate: $('#Createddate').val(),
                        Updateddate: $('#Updateddate').val(),
                        File:        $('#userfile').val(),

                        ajax:1
                    };

                    $('#Firstname').attr("disabled",true);
                    $('#Lastname').attr("disabled",true);
                    $('#Email').attr("disabled",true);
                    $('#Phone').attr("disabled",true);
                    $('#Address').attr("disabled",true);
                    $('#Password').attr("disabled",true);
                    $('#Status').attr("disabled",true);
                    $('#Createddate').attr("disabled",true);
                    $('#Updateddate').attr("disabled",true);
                    $('#userfile').attr("disabled",true);

                  $.ajax({
                    url : "<?php echo site_url('Employee_controller/submit')?>",
                    type : 'POST',
                    data : form_data,
                    success: function(msg){
                    $('#show').html(msg),
                    $('#id').val(''),
                    $('#Firstname').val(''),
                    $('#Lastname').val(''),
                    $('#Email').val(''),
                    $('#Phone').val(''),
                    $('#Address').val(''),
                    $('#Password').val(''),
                    $('#Status').val(''),
                    $('#Createddate').val(''),
                    $('#Updateddate').val(''),
                    $('#userfile').val(''),

                    $('#Firstname').attr("disabled",false);
                    $('#Lastname').attr("disabled",false);
                    $('#Email').attr("disabled",false);
                    $('#Phone').attr("disabled",false);
                    $('#Address').attr("disabled",false);
                    $('#Password').attr("disabled",false);
                    $('#Status').attr("disabled",false);
                    $('#Createddate').attr("disabled",false);
                    $('#Updateddate').attr("disabled",false);
                    $('#userfile').attr("disabled",false);
                    $( '#form_input' ).dialog( "close" )
                    }
                  });

            },
                Cancel: function() {
                    $('#id').val(''),
                    $('#Firstname').val(''),
                    $('#Lastname').val(''),
                    $('#Email').val(''),
                    $('#Phone').val(''),
                    $('#Address').val(''),
                    $('#Password').val(''),
                    $('#Status').val(''),
                    $('#Createddate').val(''),
                    $('#Updateddate').val(''),
                    $('#userfile').val(''),

                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                    $('#id').val(''),
                    $('#Firstname').val(''),
                    $('#Lastname').val(''),
                    $('#Email').val(''),
                    $('#Phone').val(''),
                    $('#Address').val(''),
                    $('#Password').val(''),
                    $('#Status').val(''),
                    $('#Createddate').val(''),
                    $('#Updateddate').val(''),
                    $('#userfile').val('')
            }
        });

    $( "#create-daily" )
            .button()
            .click(function() {
                $( "#form_input" ).dialog( "open" );
            });
    });

    $(".edit").live("click",function(){
        var id = $(this).attr("id");
        var Firstname = $(this).attr("Firstname");
        var Lastname = $(this).attr("Lastname");
        var Email = $(this).attr("Email");
        var Phone = $(this).attr("Phone");
        var Address = $(this).attr("Address");
        var Password = $(this).attr("Password");
        var Status = $(this).attr("Status");
        var Createddate = $(this).attr("Createddate");
        var Updateddate = $(this).attr("Updateddate");
        var File = $(this).attr("userfile");

        $('#id').val(id);
        $('#Firstname').val(Firstname);
        $('#Lastname').val(Lastname);
        $('#Email').val(Email);
        $('#Phone').val(Phone);
        $('#Address').val(Address);
        $('#Password').val(Password);
        $('#Status').val(Status);
        $('#Createddate').val(Createddate);
        $('#Updateddate').val(Updateddate);
        $('#userfile').val(File);

        $( "#form_input" ).dialog( "open" );

        return false;
    });

    $(".delbutton").live("click",function(){
        var element = $(this);
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
        $('#del_id').val(del_id);
        $( "#dialog-confirm" ).dialog( "open" );

        return false;
    });
    </script>

  </head>

  <body>

    <p>
        <button id="create-daily">Add New</button>
    </p>
  <div id="show">
        <?php $this->load->view('emp/show'); ?>
    </div>

<div id="form_input">
      <table border="1">
        <?php echo form_open('Employee_controller/submit'); ?>
        <input type="hidden" value='' id="id" name="id">
        <tr >
            <td> <?php echo form_label('Firstname : '); ?></td>
            <td> <?php echo form_input('Firstname','','id="Firstname"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Lastname : ');?> </td>
            <td> <?php echo form_input('Lastname','','id="Lastname"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Email : ');?> </td>
            <td> <?php echo form_input('Email','','id="Email"'); ?></td>
        </tr>
         <tr >
            <td> <?php echo form_label('Phone : '); ?></td>
            <td> <?php echo form_input('Phone','','id="Phone"'); ?></td>

        </tr>
        <tr>
            <td> <?php echo form_label('Address : ');?> </td>
            <td> <?php echo form_input('Address','','id="Address"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Password : ');?> </td>
            <td> <?php echo form_input('Password','','id="Password"'); ?></td>
        </tr>
         <tr >
            <td> <?php echo form_label('Status : '); ?></td>
            <td> <?php echo form_input('Status','true','id="Status"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Createddate : ');?> </td>
            <td> <?php echo form_input('Createddate','','id="Createddate"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('Updateddate : ');?> </td>
            <td> <?php echo form_input('Updateddate','','id="Updateddate"'); ?></td>
        </tr>
        <tr>
            <td> <?php echo form_label('File : ');?> </td>

            <td><input type="file" name="userfile" id = "userfile" size="20" /></td>


        </tr>




      </table>
</div>

    <div id="dialog-confirm" title="Delete Item ?">
    <p>
        <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        <input type="hidden" value='' id="del_id" name="del_id">
        Are you sure?</p>
</div>

  </body>
</html>

1 个答案:

答案 0 :(得分:0)

upload image using codeigniter with ajax and formdata

在表格属性中使用enctype =“multipart / form-data”。你没有按照我的说法宣布表格。

请按照链接为我工作。