Gerenciador de imagem

[Giihh 6]

Olá,

 

Preciso de um gerenciador de imagem para colocar no input de um form, que seja possivel:

 

1 - Ver (view all) todas imagens já existentes e adicionar novas imagens na pasta /imagens do servidor (uploads).

2 - ao fazer o upload pegar o caminho da imagem e colocar no input, para ir somente o valor do input para o DB.

 

Alguma indicação?

 

Muito obrigada!

[allex_carvalho 124]

Para listar as imagens já cadastradas, basta usar uma div para listar as imagens ou um modal. Pelo que entendi, deseja fazer um upload sem refresh, com uma rápida pesquisa conseguirá encontrar diversas ferramentas que fazem isso.

Se não entendi corretamente o que precisa, detalhe melhor sua dúvida e mostre o caminho que está seguindo.

[Giihh 6]

Obrigada @Alex_carvalho,

 

Então eu estava tentando instalar o ckfinder depois o elfinder, mas acho que é muito complexo para uma tarefa simples:

 

Ao clicar no input do form para adicionar uma imagem em um post, por exemplo, quero que abra a pasta no SERVIDOR que contem todas imagens e dentro desta pasta ter opção de adicionar novas imagens do meu computador se não tiver a imagem que quero no servidor.

 

Ao selecionar a imagem que vai aparecer no post e dar um ok, por exemplo, o caminho da imagem aparecer no input para quando salvar o novo post no DB na coluna url_imagem ser salvo exatamente o que estava no input.

[allex_carvalho 124]

O ckfinder é usado pelo plugin ckeditor para textarea. Sua intenção é usar a imagem no corpo do texto onde poderá definir a posição da imagem (a direita ou esquerda do texto), tamanho etc...? Ou será uma imagem já com lugar e tamanho definido no HTML?

[Giihh 6]

Sim já usei o ckeditor, estava tentando usar o ckfinder sem ele. Mas desta vez não quero usar o ckeditor.Sim sera com lugar e tamanho definido no html, na pagina de categoria a imagem será chamada tbm, não como corpo do texto

[allex_carvalho 124]

Então basta usar uma classe para manipular o upload de imagens. Veja os recursos desta classe.

[Giihh 6]

Obrigada, não conhecia esta classe, mas esqueci de dizer que a imagem na pagina de categoria não sera miniatura. Embora entendi que da para usar a minitura para exibir em uma galeria em um modal por exemplo. Mas como fazer para exibir todas imagens e ser possivel selecionar? pq basicamente o que entendi é que o foreach varre o diretorio e cria miniatura em outro diretorio (/thumbs):

<?php
// include da classe m2brimagem
include('m2brimagem.class.php');
// instancia objeto m2brimagem
$oImg = new m2brimagem();
// define diretórios
$diretorio = 'galeria/';
$dir_thumbs = $diretorio.'thumbs/';
// varre diretório com as imagens originais
$arquivos = scandir($diretorio);
// lista arquivos do diretório
// e pega somente os de extensão jpg ou jpeg
foreach($arquivos as $arquivo) {
    if(eregi(".+.[jJ][pP][eE]?[gG]$", $arquivo)) {
        // "carrega" arquivo
        $oImg->carrega($diretorio.$arquivo);
        $valida = $oImg->valida();
        if ($valida == 'OK') {
            // redimensiona
            $oImg->redimensiona(80,80,'crop');
            // salva no diretório das miniaturas
            $oImg->grava($dir_thumbs.$arquivo,100);
            echo "Miniatura criada para "
    . $diretorio.$arquivo
. "<hr />";
        } else {
            echo "Erro ao criar miniatura para "
    . $diretorio.$arquivo
. ": " . $valida . "<hr />";
        }
    }
}
exit;
?>

Editando:

 

No foreach seria algo assim para exibir no modal né?:

foreach($arquivos as $arquivo) {
    if(eregi(".+.[pP][nN][gG]$", $arquivo)) {
        // "carrega" arquivo
        $oImg->carrega($diretorio.$arquivo);
        $valida = $oImg->valida();
        if ($valida == 'OK') {
            // aqui eu crio uma div para exibir cada imagem
echo "<img scr='". $diretorio.$arquivo ."' />";
        
        } else {
            echo "Erro ao exibir imagem "
    .
        }
    }

Tentei e todas imagens estão carregando somente no console, mesmo com o caminho absoluto. Ficando em branco na tela

echo "<img scr='http://meusite.com.br/upload/".$arquivo ."' />";

[allex_carvalho 124]

Bom, onde está

$oImg->redimensiona(80,80,'crop');

Você define o tamanho da imagem. Pode definir a thumb para a listagem desejada.

 

Para listar as imagens e exibir o diretório no input, terá que usar JavaScript pra isso. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
    <head>
        <title>Página teste</title>

        <meta charset="utf-8" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery("#imagens a").click(function(){
                    jQuery("#caminho_arquivo").val(jQuery(this).attr('data'));
                });
            });
        </script>
    </head>

    <body>
        <ul id="imagens">
            <li>
                <a href="#" data="aqui-vai-o-caminho/do-arquivo.jpg" title="Campo 1">Campo 1</a>
            </li>
            <li>
                <a href="#" data="aqui-vai-o-outro-caminho/do-outro-arquivo.jpg" title="Campo 2">Campo 2</a>
            </li>
        </ul>

        <input type="text" id="caminho_arquivo" name="caminho_arquivo" value="" />
    </body>
</html>

Pode usar um simples while para buscar as imagens cadastradas.

[Giihh 6]

Tanto para

if ($valida == 'OK') {
            // imagens encontrada pelo scandir sem transforma-las em thumbnails
echo "<img scr='". $diretorio.$arquivo ." data='". $diretorio.$arquivo ."' />";
          // deveria exibir a imagem na tela não somente no console o caminho esta correto, se não estivesse ia aparecer aquele quadradinho quando o diretorio esta errado ou a imagem não exite, mas nem isso aparece
        }

Como para o que você sugeriu:

if ($valida == 'OK') {
            // se quiser redimensionar (isso é opcional, pelo que entendi)
            $oImg->redimensiona(80,80,'crop');
            // salva no diretório das miniaturas
            $oImg->grava($dir_thumbs.$arquivo,100);
            echo "<img scr='". $dir_thumbs.$arquivo ."' data='". $dir_thumbs.$arquivo ."' />"; // Assim como no exemplo acima deveria exibir a imagem na tela não somente no console o caminho esta correto, se não estivesse ia aparecer aquele quadradinho quando o diretorio esta errado ou a imagem não exite, mas nem isso aparece

        }

Sobre o jquery deu para entender, obrigada novamente, coloquei nos exemplos acima, mas não faço ideia pq exibe no console e codigo fonte com a tag img e tudo mas na tela não imprime as imagens

[allex_carvalho 124]

Vamos a um passo de cada vez. O processo acima provavelmente está sendo feito com refresh, então, não vai exibir a imagem mesmo. Quando a página foi carregada, não havia a imagem na pasta. Para mostrar todas imagens já cadastradas (exceto a do upload), monte um while e exiba as imagens. Por fim, precisará usar upload de imagens sem refresh para conseguir exibir a imagem logo após o upload.

[Giihh 6]

Sobre o refresh não sabia que o while resolve isso, mas no primeiro exemplo as imagens já estão no diretorio e mesmo assim não imprime, mas como passa pela classe primeiro faz sentido.

 

Acho que estou fazendo alguma coisa errada no while, a pagina fica carregando e não para:

 

foreach($arquivos as $arquivo) {
if(eregi(".+.[pP][nN][gG]$", $arquivo)) {
// "carrega" arquivo
$oImg->carrega($diretorio.$arquivo);
$valida = $oImg->valida();
if ($valida == 'OK') {


$total = count($arquivo);
$i = $arquivo;
while( $i <= $total ){
echo '<img scr="'. $diretorio.$arquivo .'" />';
 $i++;
} 


} else {
echo "Erro ao criar miniatura para " 
             . $diretorio.$arquivo 
                . ": " . $valida . "<hr />";
}
}
}

[allex_carvalho 124]

Não é isso. Eu sugeri acima "fatiar" o problema. Desenvolver uma coisa por vez. Sugeri o while para buscar as imagens já cadastradas. Depois que exibir estas imagens, vamos exibir a imagem recém cadastrada. Isso para que você entenda melhor o processo. Veja um exemplo do que estou tentando explicar:

<ul id="imagens">
<?php
$sql_imagens = 'SELECT * FROM imagens ORDER BY id DESC';
$qr_imagens = mysqli_query($conexao, $sql_imagens) or die(mysqli_error($conexao));
while ($rs_imagens = mysqli_fetch_assoc($qr_imagens)) {
    echo '
        <li>
            <a href="#" data="' . $rs_imagens['caminho'] . '" title="' . $rs_imagens['titulo'] . '">' . $rs_imagens['titulo'] . '</a>
        </li>
    ' . PHP_EOL;
}
?>
</ul>

Depois que listar as imagens já cadastradas, passe para o próximo passo, que é fazer o upload sem refresh e após finalizar, exibir a imagem recém cadastrada. Sempre resolva uma coisa por vez, evitando não se perder no meio do processo.

[Giihh 6]

Ah sim!

 

1º no primeiro post do topico coloquei que preciso capturar a url da imagem selecionada e que EXISTE na pasta e se caso não existir fazer upload na PASTA no servidor,.

 

-> Capturar a URL o script jquery resolve: arquivo existente na pasta -> clicar no arquivo -> pegar URL -> enviar para DB

 

2º Atualmente o while para a coluna imagem vai retornar vazio, mas não faz sentido usar ele já que quero as imagens da pasta não do DB,

 

3º Reiterando O gerenciador é para ver as imagens da pasta não do DB, a unica coisa que envolve o DB é o cadastro da url e imprimir ela no post e na categoria. Mas imprimir a coluna no post e na categoria já esta ok, porem como disse esta vazia.

 

 

Estou tentando fazer sem a classe e percebi que a função eregi esta obsoleta,

 

http://php.net/manual/pt_BR/function.eregi.php

 

Como posso substituir este trecho:

if(eregi(".+.[pP][nN][gG]$", $arquivo)

aproveitando a expressão regular para capturar apenas png?

[Giihh 6]

Consegui assim, tudo em um modal menos o formulario, claro. Ao clicar no botao imagens, vai abrir o modal e exibir imagens do diretório configurado

 

vou passar os códigos sem o css e html

 

busca arquivos no diretorio e filtra por png:

$dirname = "../uploads/imagens/"; 
     foreach(glob($dirname.'*') as $filename){
          if(preg_match("%.+.png$%i", $filename)){
               echo '<img src="../uploads/imagens/'.basename($filename).'"  width="150px" height="150px"/>'; 
            } else {
             
          }
}

Se ja tem a imagem que quer no diretorio só clicar em cima

Ao clicar vai capturar url e preencher campo input que esta no form fora do modal (pode configurar para fechar o modal depois do click na imagem desejada ou clicando em x)

 

para clicar na imagem e copiar o valor src no input usei jquery:

<script type="text/javascript">
       jQuery(document).ready(function(){
            $('img').click(function(){
            $('#caminho_arquivo').val($(this).attr('data'));
        })
 });
</script>
//input que sera prechido no form fora do modal
<input type="text" id="caminho_arquivo" name="caminho_arquivo" value="" />

Mas caso não tenha a imagem na pasta, dentro do modal tem outro botão "Upload de imagem"

<form method="post" id="form_first" action="recebe_upload.php" enctype="multipart/form-data"> 
    <input type="file" name="arquivo" />//pode estilizar o botão
</form>

Usei o arquivo recebe upload do Thiago Belem:

 

http://blog.thiagobelem.net/upload-de-arquivos-com-php

 

mais uma vez obrigada Alex Carvalho