Como fazer upload de imagens e arquivos no CodeIgniter (com exemplo)
Fiona Brown
Upload de arquivo CodeIgniter
O gerenciamento de arquivos é essencial para a maioria dos aplicativos da web. Se você estiver desenvolvendo um sistema de gerenciamento de conteúdo, precisará ser capaz de fazer upload de imagens, documentos do Word, relatórios em PDF, etc. Se estiver trabalhando em um site de membros, pode ser necessário providenciar que as pessoas carreguem seus perfis imagens. A classe File Uploading do CodeIgniter torna mais fácil para nós fazer todos os itens acima.
Neste tutorial, veremos como usar a biblioteca de upload de arquivos para carregar arquivos.
Fazendo upload de imagens no CodeIgniter
Upload de arquivo em CodeIgniter tem duas partes principais. O front-end e o back-end. O frontend é gerenciado pelo formulário HTML que usa o arquivo do tipo de entrada do formulário. No backend, a biblioteca de upload de arquivos processa a entrada enviada do formulário e a grava no diretório de upload.
Vamos começar com o formulário de entrada.
Crie um novo diretório chamado arquivos no diretório application/views
Adicione os seguintes arquivos em application/views/files
- upload_form.php – esta visualização contém o formulário HTML que possui o tipo de arquivo de entrada e envia o arquivo selecionado ao servidor para processamento
- upload_result.php – esta visualização exibe os resultados da imagem enviada, incluindo um link no qual podemos clicar para visualizar os resultados.
Adicione o seguinte código a upload_form.php
<!DOCTYPE html>
<html>
<head>
<title>CodeIgniter Image Upload</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Select an image from your computer and upload it to the cloud</h3>
<?php
if (isset($error)){
echo $error;
}
?>
<form method="post" action="<?=base_url('store-image')?>" enctype="multipart/form-data">
<input type="file" id="profile_image" name="profile_image" size="33" />
<input type="submit" value="Upload Image" />
</form>
</div>
</body>
</html>
AQUI,
- if (isset($error)){…} verifica se a variável de erro foi definida. Se o resultado for verdadeiro, o erro retornado pela biblioteca de upload será exibido ao usuário.
- o tipo de arquivo permite ao usuário navegar até seu computador e selecionar um arquivo para upload.
Adicione o seguinte código em upload_result.php
<!DOCTYPE html>
<html>
<head>
<title>Image Upload Results</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h3>Congratulations, the image has successfully been uploaded</h3>
<p>Click here to view the image you just uploaded
<?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?>
</p>
<p>
<?php echo anchor('upload-image', 'Go back to Image Upload'); ?>
</p>
</div>
</body>
</html>
AQUI,
- usa o auxiliar âncora para criar um link para o novo arquivo carregado no diretório de imagens. O nome é recuperado dos metadados da imagem que são passados para a visualização quando o arquivo é carregado com êxito.
Vamos agora criar o controlador que responderá ao upload da nossa imagem
Adicione um novo arquivo ImageUploadController.php em application/controllers
Adicione o seguinte código a ImageUploadController.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ImageUploadController extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url', 'form');
}
public function index() {
$this->load->view('files/upload_form');
}
public function store() {
$config['upload_path'] = './images/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 2000;
$config['max_width'] = 1500;
$config['max_height'] = 1500;
$this->load->library('upload', $config);
if (!$this->upload->do_upload('profile_image')) {
$error = array('error' => $this->upload->display_errors());
$this->load->view('files/upload_form', $error);
} else {
$data = array('image_metadata' => $this->upload->data());
$this->load->view('files/upload_result', $data);
}
}
}
AQUI,
- class ImageUploadController estende CI_Controller {…} define nossa classe de controlador e estende o controlador base CI_Controller
- função pública __construct() {…} inicializa o método construtor pai e carrega o URL e os auxiliares de formulário
- public function index() {…} define o método de índice usado para exibir o formulário de upload de imagem
- public function store() {…} define o método que fará upload da imagem e a armazenará no servidor de aplicativos web.
- $config['upload_path'] = './images/'; define o diretório onde as imagens devem ser carregadas
- $config['allowed_types'] = 'gif|jpg|png'; define as extensões de arquivo aceitáveis. Isto é importante por razões de segurança. Os tipos permitidos garantem que apenas imagens sejam carregadas e outros tipos de arquivos, como php, não possam ser carregados porque podem comprometer o servidor.
- $config['max_size'] = 2000; defina o tamanho máximo do arquivo em kilobytes. Em nosso exemplo, o arquivo máximo que pode ser carregado é de 2,000kb, perto de 2MB. Se o usuário tentar fazer upload de um arquivo maior que 2,000 KB, o upload da imagem falhará e a biblioteca retornará uma mensagem de erro.
- $config['max_width'] = 1500; define a largura máxima da imagem que no nosso caso é 1,500 px. Qualquer largura maior que isso resulta em erro
- $config['max_height'] = 1500; define a altura máxima aceitável.
- $this->load->library('upload', $config); carrega a biblioteca de upload e a inicializa com o array $config que definimos acima.
- if (!$this->upload->do_upload('profile_image')) {…} tenta fazer upload da imagem enviada que no nosso caso é chamada profile_image
- $erro = array('erro' => $this->upload->display_errors()); define a mensagem de erro se o upload falhar
- $this->load->view('arquivos/upload_form', $error); carrega o formulário de upload de arquivo e exibe a mensagem de erro retornada da biblioteca de upload
- $dados = array('image_metadata' => $this->upload->dados()); define os metadados da imagem se o upload tiver sido bem-sucedido
- $this->load->view('arquivos/upload_result', $dados); carrega a visualização carregada com sucesso e transmite os metadados do arquivo carregado.
É isso para o controlador. Vamos agora criar o diretório onde nossas imagens serão enviadas. Crie um novo diretório “images” no diretório raiz do seu aplicativo
Por fim, adicionaremos duas rotas ao nosso arquivo Routes.php que exibirá o formulário e os resultados
Open application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/store';
AQUI,
- $route['upload-image'] = 'imageuploadcontroller'; define a URL upload-image que chama o método index de ImageUploadController
- $route['store-image'] = 'imageuploadcontroller/store'; define a URL store-image que aceita o arquivo do usuário selecionado e o carrega para o servidor.
Testando o aplicativo
Vamos iniciar o servidor PHP integrado
Abra o terminal/linha de comando e navegue até a raiz do seu aplicativo. No meu caso, a raiz está localizada na unidade C:\Sites\ci-app
cd C:\Sites\ci-app
inicie o servidor usando o seguinte comando
php -S localhost:3000
Carregue o seguinte URL em seu navegador: http://localhost:3000/upload-image
você poderá ver os seguintes resultados
Clique em escolher arquivo
Você deverá conseguir ver uma janela de diálogo semelhante à seguinte
Selecione a imagem desejada e clique em abrir
O nome do arquivo selecionado aparecerá no formulário de upload conforme mostrado na imagem acima. Clique em um botão de upload de imagem
Você obterá os seguintes resultados assumindo que tudo corra bem
Clique em Ver minha imagem! Link
Você deverá conseguir ver a imagem que carregou. Os resultados serão semelhantes aos seguintes
Observe que o nome da imagem carregada é exibido no URL. Obtivemos o nome da imagem dos metadados da imagem enviada
Nota: O processo de upload de arquivos permanece o mesmo para outros tipos de arquivos
