[CodeInteger 2][jQuery Upload Files] Czyli jak wykorzystać plugin od jQuery z CodeIntegerem 2

Witam, w tym poście przedstawie sposób na integracje naszego frameworka z pluginem jQuery do uploadu plików.





Potrzebujemy obiekt widoku:

- view_upload.php:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">         
        <!-- Link do FontAwesome-->
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
       
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
       
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
       
        <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
       
        <script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
    </head>
    <body class="bs-docs-home" data-twttr-rendered="true">
        <div id="fileuploader">Upload </div>
       
        <script>
           
        $(document).ready(function()
        {               
                $("#fileuploader").uploadFile({
                    url:"upload/do_upload",
                    fileName:"myfile"
                //multiple:true               
                });
               
        });       
       
        </script>      
    </body>   
</html>

Oczywiście później nasz skrypt js możemy umieścić w osobnym pliku i go podlinkować.

oraz funkcję kontrolera upload.php obsługującą upload plików:



<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Upload extends CI_Controller {
               
        function __construct()
                {
                               parent::__construct();
                               $this->load->helper(array('form', 'url'));
                }
       
                public function index()
                {          
                       $this->load->view('view_upload');          
                }
       
        public function do_upload() {            
               
               
            $output_dir = "uploads/";
            if(isset($_FILES["myfile"]))
            {
                    $ret = array();

                    $error =$_FILES["myfile"]["error"];
                    //You need to handle  both cases
                    //If Any browser does not support serializing of multiple files using FormData()
                    if(!is_array($_FILES["myfile"]["name"])) //single file
                    {
                            $fileName = $_FILES["myfile"]["name"];
                            move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
                            $ret[]= $fileName;
                    }
                    else  //Multiple files, file[]
                    {
                      $fileCount = count($_FILES["myfile"]["name"]);
                      for($i=0; $i < $fileCount; $i++)
                      {
                            $fileName = $_FILES["myfile"]["name"][$i];
                            move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
                            $ret[]= $fileName;
                      }

                    }
                echo json_encode($ret);
             } 
          
        }
}

akcja która przyjmuje nasz plik to do_upload(), zrezygnowałem w niej z klasy pomocniczej do pobierania plików jaką oferuje CI2 bo po prostu z naszym pluginem nie działa tak jak powinna.
Najważniejszą zmienną tutaj jest $output_dir, który wskazuje na folder w katalogu public/ gdzie mają odkładać się nasze pliki