Upload múltiplo no CodeIgniter com Uploadify 3

Fazer uploads múltiplos tem sido uma necessidade cada vez mais constante em sistemas web, e hoje vou mostrar para vocês, de forma bem objetiva, como fazer o upload múltiplo na framework PHP Codeigniter usando o Uploadify 3, que é um sistema de upload múltiplo desenvolvido em Flash e HTML 5.

Por | @jonathanlamimkt Programação
<p>Fazer uploads m&uacute;ltiplos tem sido uma necessidade cada vez mais constante em sistemas web, e hoje vou mostrar para voc&ecirc;s, de forma bem objetiva, como fazer o upload m&uacute;ltiplo na framework PHP Codeigniter usando o Uploadify 3, que &eacute; um sistema de upload m&uacute;ltiplo desenvolvido em Flash e HTML 5. Nesse artigo abordaremos o uso da vers&atilde;o em flash, uma vez que nem todos os browsers suportam o HTML5.</p> <p>Para iniciar, v&aacute; at&eacute; o site do Uploadify (<a rel="nofollow" href="http://www.uploadify.com" target="_blank">uploadify.com</a>) e fa&ccedil;a o download da vers&atilde;o 3, em flash. Ap&oacute;s terminar o download, extraia os arquivos em uma pasta de sua prefer&ecirc;ncia dentro do diret&oacute;rio do projeto. Ap&oacute;s fazer isso, ser&aacute; necess&aacute;rio criar um controlador chamado <em>uploadify_v3</em>, que conter&aacute; o c&oacute;digo a seguir. Esse arquivo deve ser salvo na pasta <em>"application/controllers"</em>.</p> <p><code>class Uploadify_v3 extends CI_Controller<br />{<br />    public $view_data = array();<br />    private $upload_config;<br /> <br />    function __construct()<br />    {<br />        parent::__construct();<br />    }<br /> <br />    public function index()<br />    {<br />        $this->load->helper(array('url', 'form'));<br />        $this->load->view('uploadify_v3', $this->view_data);<br />    }<br /> <br />    public function do_upload()<br />    {<br />        $this->load->library('upload');<br /> <br />        $image_upload_folder = FCPATH . '/uploads';<br /> <br />        if (!file_exists($image_upload_folder)) {<br />            mkdir($image_upload_folder, DIR_WRITE_MODE, true);<br />        }<br /> <br />        $this->upload_config = array(<br />            'upload_path'   => $image_upload_folder,<br />            'allowed_types' => 'png|jpg|jpeg|bmp|tiff',<br />            'max_size'      => 2048,<br />            'remove_space'  => TRUE,<br />            'encrypt_name'  => TRUE,<br />        );<br /> <br />        $this->upload->initialize($this->upload_config);<br /> <br />        if (!$this->upload->do_upload()) {<br />            $upload_error = $this->upload->display_errors();<br />            echo json_encode($upload_error);<br />        } else {<br />            $file_info = $this->upload->data();<br />            echo json_encode($file_info);<br />        }<br />    }<br />}<br /> <br />/* End of file uploadify_v3.php */<br />/* Location: ./application/controllers/uploadify_v3.php */</code></p> <p>Feito isso, voc&ecirc; ir&aacute; adicionar os arquivos necess&aacute;rio (css e javascript) para o funcionamento do uploadify. veja a seguir um exemplo das chamadas a esses arquivos:</p> <h2>CSS</h2> <p><code><link href="/assets/js/jquery/uploadify_31/uploadify.css" media="screen" rel="stylesheet"/></code></p> <h2><strong>JavaScript</strong></h2> <p><code><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><br /><script src="/assets/js/jquery/uploadify_31/jquery.uploadify-3.1.min.js"></script></code></p> <p><em>Observa&ccedil;&atilde;o:</em><span style="font-style: italic;"> O caminho dos arquivos mostrado acima &eacute; apenas um exemplo, voc&ecirc; dever&aacute; colocar o caminho da pasta onde extraiu o arquivo compactado.</span></p> <p>Agora voc&ecirc; dever&aacute; colocar o c&oacute;digo a seguir ou dentro do <em>&nbsp;</em> d&aacute; p&aacute;gina ou em um arquivo javascript separado. Esse c&oacute;digo &eacute; o respons&aacute;vel por renderizar e fazer a execu&ccedil;&atilde;o do upload m&uacute;ltiplo.</p> <p><code><script><br />    $(document).ready(function () {<br /> <br />        var base_url = '<?php echo base_url(); ?>';<br /> <br />        $('#upload-file').click(function (e) {<br />            e.preventDefault();<br />            $('#userfile').uploadify('upload', '*');<br />        });<br /> <br />        $('#userfile').uploadify({<br />            'auto':false,<br />            'swf': base_url + 'assets/js/jquery/uploadify_31/uploadify.swf',<br />            'uploader': base_url + 'uploadify_v3/do_upload',<br />            'cancelImg': base_url + 'assets/javascript/jquery/uploadify_31/uploadify-cancel.png',<br />            'fileTypeExts':'*.jpg;*.bmp;*.png;*.tif',<br />            'fileTypeDesc':'Image Files (.jpg,.bmp,.png,.tif)',<br />            'fileSizeLimit':'2MB',<br />            'fileObjName':'userfile',<br />            'buttonText':'Select Photo(s)',<br />            'multi':true,<br />            'removeCompleted':false<br />        });<br />    });<br /></script></code></p> <p>Veja a seguir um exemplo de como ficar&aacute; o c&oacute;digo HTML dentro da sua view para renderizar o uploadify.</p> <p><code><!-- Main Content --><br /><div class="container"><br />    <h1 class="page-header">Upload múltiplo no Codeigniter com Uploadify 3</h1><br /> <br />    <p>Esse é um tutorial simples, apresentando o iso do Uploadify V3 com o CodeIgniter 2.1.3</p><br />    <?php echo form_open_multipart(); ?><br />    <ul class="unstyled"><br />        <li><br />            <?php echo form_upload('userfile','','id="userfile"'); ?><br />            <?php echo (isset($error)) ? $error : ''; ?><br />        </li><br />        <li><br />            <?php echo form_button(array('content'=> 'Upload', 'id'=>'upload-file', 'class'=>'btn btn-large btn-primary')); ?><br />        </li><br />    </ul><br />    <?php echo form_close(); ?><br /></div><br /><!-- End Of Main Content --></code></p> <div class="container"> <h2>Upload m&uacute;ltiplo no Codeigniter com Uploadify 3</h2> </div> <div class="container">Esse &eacute; um tutorial simples, apresentando o iso do Uploadify V3 com o CodeIgniter 2.1.3. Se voc&ecirc; n&atilde;o fez nenhuma altera&ccedil;&atilde;o na estrutura original de arquivos do CodeIgniter, provavelmente voc&ecirc; ter&aacute; um problema que n&atilde;o permitir&aacute; o upload. Esse problema consiste na valida&ccedil;&atilde;o do tipo de arquivo feita pelo CodeIgniter, quando o m&eacute;todo do_upload &eacute; executado. para resolver isso, abra o aruivo mimes.php, que fica na pasta "application/config", e altere as informa&ccedil;&otilde;es dos tipos a seguir:</div> <p><code>'gif'      => array('image/gif',  'application/octet-stream'),<br />'jpeg'     => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),<br />'jpg'      => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),<br />'jpe'      => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),<br />'png'      => array('image/png',  'image/x-png', 'application/octet-stream'),<br />'tiff'     => array('image/tiff', 'application/octet-stream'),<br />'tif'      => array('image/tiff', 'application/octet-stream'),</code></p> <p>Essa altera&ccedil;&atilde;o far&aacute; com que o m&eacute;todo do_upload interprete corretamente o tipo de arquivo enviado pelo flash que executa o upload m&uacute;ltiplo. Para informa&ccedil;&otilde;es detalhadas, n&atilde;o deixe de visitar a documenta&ccedil;&atilde;o, tanto do Uploadify quanto do CodeIgniter:</p> <p>Uploadify: <a rel="nofollow" href="http://www.uploadify.com" target="_blank">www.uploadify.com<br /></a>CodeIgniter: <a rel="nofollow" href="http://ellislab.com/codeigniter" target="_blank">http://ellislab.com/codeigniter</a></p> <p><a rel="nofollow" href="http://ellislab.com/codeigniter" target="_blank"></a>N&atilde;o deixem de postar nos coment&aacute;rios as d&uacute;vidas...</p>

Mais sobre: codeigniter, upload, uploadify
Share Tweet
DESTAQUES
Mais compartilhados
Comentários