Como fazer upload de imagens e arquivos em CodeIgnição (com exemplo)

CodeUpload de Arquivos Igniter

O gerenciamento de arquivos é essencial para a maioria das aplicações web. Se você é desenvolvedor...ping Se você estiver usando um sistema de gerenciamento de conteúdo, precisará ser capaz de fazer upload de imagens, documentos do Word, relatórios em PDF e muito mais. Se estiver trabalhando em um site de membros, talvez precise disponibilizar uma opção para que os usuários façam upload de suas fotos de perfil. CodeA classe de upload de arquivos do Igniter facilita muito a realização de tudo isso.

Neste tutorial, veremos como usar a biblioteca de upload de arquivos para carregar arquivos.

Carregando imagens em CodeIgnorar

Upload de arquivo em CodeIgnorar Possui duas partes principais: o frontend e o backend. O frontend é gerenciado pelo formulário HTML que utiliza o tipo de entrada de arquivo. No backend, a biblioteca de upload de arquivos processa a entrada enviada pelo formulário e a grava no diretório de uploads.

Vamos começar com o formulário de entrada.

Crie um novo diretório chamado "files" 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 página exibe os resultados da imagem enviada, incluindo um link clicável 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(0)?>" 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 é 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 ao arquivo 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,

• Utiliza o auxiliar de âncora para criar um link para o arquivo recém-carregado no diretório de imagens. O nome é obtido dos metadados da imagem que são passados ​​para a visualização quando o arquivo é carregado com sucesso.

Vamos agora criar o controlador que responderá ao nosso envio de 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. Isso é importante por motivos de segurança. Os tipos permitidos garantem que apenas imagens sejam enviadas e que outros tipos de arquivo, como PHP, não sejam enviados, pois podem comprometer o servidor.
  • `$config['max_size'] = 2000;` define o tamanho máximo do arquivo em kilobytes. No nosso exemplo, o arquivo máximo que pode ser carregado é de 2,000 KB, próximo a 2 MB. Se o usuário tentar carregar um arquivo maior que 2,000 KB, a imagem não será carregada e a biblioteca retornará uma mensagem de erro.
  • `$config['max_width'] = 1500;` define a largura máxima da imagem, que em nosso caso é de 1,500 px. Qualquer largura maior que essa resulta em um 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 o upload da imagem enviada, que em nosso caso se chama 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 conclui a configuração do controlador. Agora, vamos criar o diretório onde as imagens serão armazenadas. Crie um novo diretório chamado "images" no diretório raiz da sua aplicação.

Por fim, adicionaremos duas rotas ao nosso arquivo routes.php que exibirão o formulário e os resultados.

Abra o arquivo application/config/routes.php e adicione as seguintes rotas.

$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

AQUI,

• $route['upload-image'] = 'imageuploadcontroller'; define o URL upload-image que chama o método index do ImageUploadController
• $route['store-image'] = 'imageuploadcontroller/store'; define o URL O comando `store-image` aceita o arquivo selecionado pelo usuário e o envia para o servidor.

Como corrigir problemas comuns CodeErros de upload de arquivos do Igniter

Na maioria dos casos, as falhas de upload retornam uma mensagem clara da biblioteca de upload. A lista abaixo relaciona os erros comuns às suas respectivas soluções.

• O tipo de arquivo que você está tentando enviar não é permitido: Adicione a extensão que falta à configuração allowed_types, por exemplo, 'gif|jpg|png|pdf'.
• O arquivo que você está tentando enviar é maior do que o tamanho permitido: Aumente o tamanho máximo (max_size) e confirme se os valores de upload_max_filesize e post_max_size no arquivo php.ini são suficientemente grandes.
• O caminho de upload parece não ser válido: Crie o diretório upload_path e certifique-se de que o servidor web tenha permissão de escrita nele.
• Você não selecionou nenhum arquivo para enviar: Verifique se o nome do campo de entrada corresponde ao argumento do_upload() e se o formulário usa o tipo de criptografia multipart/form-data.

Testando o aplicativo

Vamos iniciar o servidor PHP integrado.

Abra o terminal ou a 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 No seu navegador web: 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, como mostrado na imagem acima. Clique no botão "Enviar imagem".

Você obterá os seguintes resultados, supondo que tudo corra bem.

Clique no link "Ver minha imagem!"

Você deverá conseguir visualizar a imagem que carregou. Os resultados serão semelhantes aos seguintes.

Observe que o nome da imagem carregada é exibido no URLObtivemos o nome da imagem a partir dos metadados da imagem carregada.

Observação: O processo de envio de arquivos permanece o mesmo para outros tipos de arquivos.

Perguntas Frequentes