Upload de imagens e arquivos PHP com Uploadify

Aprenda a criar um sistema de upload de arquivos em PHP e jQuery. Uploadify é um plugin que adiciona a funcionalidade de multiplo upload de arquivo arquivos em seu site. Um dos pontos fortes de plugin é sua fácil implementação e a possibilidade de customização.

Por | @marcianodias Programação
<p class="p1">Uploadify &eacute; um plugin que adiciona a funcionalidade de multiplo upload de arquivo arquivos em seu site. Um dos pontos fortes de plugin &eacute; sua f&aacute;cil implementa&ccedil;&atilde;o e a possibilidade de customiza&ccedil;&atilde;o.</p> <p class="p2">Neste tutorial ensinarei como usar o Uploadify e como configurar o uploadify e como implement&aacute;-lo em suas p&aacute;ginas web. Um detalhe importante &eacute; que neste tutorial n&atilde;o irei utilizar banco de dados. Quem sabe em um pr&oacute;ximo tutorial, dependendo do feedback deste tutorial.</p> <p class="p3"><strong>Vamos ao tutorial:&nbsp;</strong>Para este tutorial utilizei a vers&atilde;o free do uploadify.&nbsp;<a href="https://www.oficinadanet.com.br/imagens/post/9518/uploadifydownload.zip">Download do Uploadify</a>.&nbsp;Ap&oacute;s baixar o uploadify.zip extraia os arquivos na pasta raiz de onde ficar&aacute; os arquivos de upload de seu site. Veja como ficou o meu:</p> <p class="p3"><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9518/1.jpg" alt="" /></span></p> <p class="p1">Agora, voc&ecirc; pode excluir o arquivo <strong>uploadifydownload.zip</strong>.&nbsp;Se voc&ecirc; abrir o navegador e acessar o diret&oacute;rio do uploadify, voc&ecirc; ter&aacute; o seguinte resultado:</p> <p class="p1"><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9518/2.jpg" alt="" /></span></p> <p class="p1" style="text-align: center;"><strong>DICA: <a href="../post/9400-instalando-o-ambiente-de-funcionamento-php">Aprenda a instalar o servidor web em seu computador para rodar arquivos locais.</a></strong></p> <p class="p1">Para teste, carreguei uma imagem. Veja o resultado:</p> <p class="p1"><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9518/3.jpg" alt="" /></span></p> <p class="p1">Se voc&ecirc; clicar em <strong>Select Files</strong>, j&aacute; &eacute; possivel carregar os arquivos. Entretanto, &eacute; necess&aacute;rio fazer alguns ajustes para funcionar de forma correta.&nbsp;Na pasta onde cont&eacute;m os arquivos do Uploadify crie uma pasta com o nome <strong>uploads</strong>.</p> <p class="p1"><strong>OBS:</strong> O nome da pasta n&atilde;o &eacute; uma regra, nem o local, voc&ecirc; pode colocar qualquer nome e em qualquer local do diret&oacute;rio de arquivos de seu site.</p> <p class="p1">Agora, abra o arquivo <strong>uploadify.php</strong>. Neste arquivo voc&ecirc; poder&aacute; alterar o local da pasta que ficar&aacute; os uploads e o pr&oacute;prio nome da pasta. Basta alterar a vari&aacute;vel <strong>$targetFolder</strong>.</p> <p class="p1"><code><?php <br />/* <br />Uploadify <br />Copyright (c) 2012 Reactive Apps, Ronnie Garcia <br />Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>  <br />*/ <br /> <br />// Define a destination <br />$targetFolder = '../uploads/'; // Relative to the root <br /> <br />$verifyToken = md5('unique_salt' . $_POST['timestamp']); <br /> <br />if (!empty($_FILES) && $_POST['token'] == $verifyToken) { <br />    $tempFile = $_FILES['Filedata']['tmp_name']; <br />    $targetPath = $targetFolder; <br />    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name']; <br />  <br />    // Validate the file type <br />    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions <br />    $fileParts = pathinfo($_FILES['Filedata']['name']); <br />  <br />    if (in_array($fileParts['extension'],$fileTypes)) { <br />       move_uploaded_file($tempFile,$targetFile); <br />       echo '1'; <br />    } else { <br />        echo 'Invalid file type.'; <br />    } <br />} <br />?></code></p> <p class="p1"><strong>Dica:</strong> se voc&ecirc; n&atilde;o t&ecirc;m habilidades e conhecimentos suficiente para fazer altera&ccedil;&otilde;es, ent&atilde;o, o ideal &eacute; deixar o padr&atilde;o e evitar dores de cabe&ccedil;a. Siga apenas este tutorial.</p> <p class="p1">Como voc&ecirc; observou, at&eacute; agora o uploadify n&atilde;o funciona. Pois embora o diret&oacute;rio esteja configurado para ser /uploads (no caso do exemplo), o que acontece &eacute; que , por conta da vari&aacute;vel global <strong>$_SERVER['DOCUMENT_ROOT']</strong>, o diret&oacute;rio est&aacute; apontando para outro local.&nbsp;Ent&atilde;o, ainda no arquivo uploadify.php, procure a linha:</p> <p class="p1"><code>$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;</code></p> <p class="p1">E altere para:</p> <p class="p1"><code>$targetPath = $targetFolder;</code></p> <p class="p1">Remova a &ldquo;/&rdquo; de $targetFolder = '/uploads'; . Resultado:</p> <p class="p1"><code>$targetFolder = 'uploads';</code></p> <p class="p1">A parte mais &ldquo;dificil&rdquo; j&aacute; foi ensinada. A implementa&ccedil;&atilde;o em suas p&aacute;ginas HTML ou PHP &eacute; simples.&nbsp;Abra o arquivo index.html que veio junto com o uploadify. Nesse arquivo voc&ecirc; t&ecirc;m, basicamente, tudo necess&aacute;rio para utilizar em suas p&aacute;ginas. Basta copiar. Neste passo n&atilde;o t&ecirc;m segredo. &Eacute; s&oacute; conhecimento em HTML.&nbsp;O segredo estar em saber quais s&atilde;o as chamadas dos scripts abaixo s&atilde;o importantes para o funcionamento do uploadify:</p> <p class="p1"><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><br /><script src="jquery.uploadify.min.js"></script><br /><link rel="stylesheet" href="uploadify.css"></code></p> <p class="p1">Isso &eacute; b&aacute;sico. Nem precisaria dizer neste tutorial que essas chamadas ficam dentro do Head do HTML.&nbsp;Agora, voc&ecirc; t&ecirc;m script que mostra o bot&atilde;o &ldquo;Select Files&rdquo; e o javascript que faz o uploadify funcionar. Veja:</p> <p class="p1"><code><form><br />    <div id="queue"></div><br />    <input id="file_upload" name="file_upload" type="file" multiple="true"><br /> </form><br /><br /> <script><br />    <?php $timestamp = time();?><br />    $(function() {<br />        $('#file_upload').uploadify({<br />            'formData'     : {<br />                'timestamp' : '<?php echo $timestamp;?>',<br />                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'<br />            },<br />            'swf'      : 'uploadify.swf',<br />            'uploader' : 'uploadify.php'<br />        });<br />    });<br /> </script></code></p> <p class="p1">Sempre que voc&ecirc; for colocar um sistema de upload com uploadify em alguma p&aacute;gina, basta utilizar esses scripts para fazer funcionar.</p> <p class="p1"><strong>Observe:</strong></p> <p class="p2"><code>'swf'      : 'uploadify.swf',<br /> 'uploader' : 'uploadify.php'</code></p> <p class="p1">Observe que meu <strong>index.php</strong> est&aacute; dentro da pasta do uploadify(lembrando que minha pasta raiz &eacute; uploadify &ndash; poderia ser qualquer outro nome). Veja:</p> <p class="p1"><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/9518/5.jpg" alt="" /></span></p> <p class="p1">Tudo que foi ensinado aqui sobre o Uploadify &eacute; o b&aacute;sico para poder utiliz&aacute;-lo. Voc&ecirc; encontra mais informa&ccedil;&otilde;es no pr&oacute;prio site do uploadify. Como disse, dependendo do feedback deste tutorial, farei um novo tutorial ensinando como cadastrar as imagens no banco de dados.</p> <p class="p1">Segue em anexo o link para download dos arquivos. Fiz algumas poucas altera&ccedil;&otilde;es para deixar no ponto de utilizar, caso voc&ecirc; tenha encontrado dificuldades.</p> <p style="text-align: center;"><strong>Arquivos para download&nbsp;</strong><br /><a href="https://www.oficinadanet.com.br/imagens/post/9518/uploadify-marcianodias.zip"><img src="https://www.oficinadanet.com.br/imagens/post/9518/botaodownloadoficina.jpg" alt="" /></a></p>

Mais sobre: upload, php, tutoriais
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários