HTML5+jquery Drag & Drop Uploader

[hvjohny 1]

E ai galera, beleza?

antes de mais nada quero dizer que quebrei a cabeça muitas horas pra tentar resolver isso e nada...

Acredito que todos já viram ou ouviram falar de Upload Drag & Drop. Pois é, resolvi aplicar o da tutorialzine em meu projeto(http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/).

Um breve resumo do funcionamento dele.

Ele possui um arquivo de "configurações gerais" .js, e outro com "configurações rápidas", também .js, que implementa o de "configurações gerais", e é nesse que vc seleciona o tamanho máximo, em qual arquivo será feita a validação, e etc.

Certo, a aplicação está funcionando corretamente. Jogo as imagens, se estiver de acordo ele executa o preview e o upload.php(onde é feito o upload de verdade).

 

O problema é que: eu quero que quando apareça o preview da imagem, apareça também a opção de editar e excluir. Consegui colocar os botões, mas o problema é fazer com que esses botões recebam a id da respectiva imagem que foi adicionada no banco de dados.

Isso é um grande problema, pois a div que mostra a imagem e os botões(que eu criei) só são executados quando vc joga a imagem para upload.

 

var template = '<div class="preview">'+
                        '<span class="imageHolder">'+
                            '<img />'+
                            '<span class="uploaded"></span>'+'<div class="listfotos100buttons"><a href="teste.php"><div class="buttonfavorite"></div></a><a href="#"><div class="buttonremove"></div></a></div>'+
                        '</span>'+
                        '<div class="progressHolder">'+
                            '<div class="progress"></div>'+
                        '</div>'+
                    '</div>'; 

 

Essa é a parta no arquivo .js que escreve a div.

Resumindo, eu não tenho como fazer href="teste.php?id=<?php echo $id[x]; ?>"

 

Conseguiram entender meu problema? Já revirei o google inteiro e não encontrei nada a respeito. Espero que vocês possam me ajudar. muito obrigado.

[hvjohny 1]

Alguém? Não sei se ficou claro, mas o que quero é acrescentar a opção delete e edit na preview... Retornar a id da imagem que foi feita o upload no upload.php para a função javascript...

[William Bruno 1501]

oque vc retorna do ajax ?

 

poste a função completa do success.

[hvjohny 1]

oque vc retorna do ajax ?

 

poste a função completa do success.

Abaixo todos os scripts: com algumas "gambiarras" que tentei fazer para retornar a id

script.js

$(function(){
    var dropbox = $('#dropbox'),
        message = $('.message', dropbox)
	
    dropbox.filedrop({
        paramname:'pic',
        maxfilesize: 2,
        url: 'caminho do upload.php',
        dragOver:function(){
            $('#dropbox').addClass('over');
        },
        uploadFinished:function(i,file,response){
            $.data(file).addClass('done');
        },
        error: function(err, file) {
            switch(err) {
                case 'BrowserNotSupported':
                    showMessage('Seu browser não suporta o upload via HTML5!');
                    break;
                case 'TooManyFiles':
                    alert('Muitos arquivos! Por favor, selecione no máximo 5 imagens! (configurável)');
                    break;
                case 'FileTooLarge':
                    alert(file.name+' é muito grande! Por favor, selecione arquivos de até 2mb (configurável).');
                    break;
                default:
                    break;
            }
        },

        beforeEach: function(file){
            if(!file.type.match(/^image\//)){
                alert('Apenas imagens são permitidas');
                return false;
            }
        },

        uploadStarted:function(i, file, len){
            createImage(file);
        },

        progressUpdated: function(i, file, progress) {
            $.data(file).find('.progress').width(progress);
        }

    });
	
    var template = '<div class="preview">'+
                        '<span class="imageHolder">'+
                            '<img />'+
                            '<span class="uploaded"></span>'+'<div class="listfotos100buttons"><a href="#" id="areaid" onmouseover="functionLink()"><div class="buttonfavorite"></div></a><a href="#"><div class="buttonremove"></div></a></div>'+
                        '</span>'+
                        '<div class="progressHolder">'+
                            '<div class="progress"></div>'+
                        '</div>'+
                    '</div>'; 


    function createImage(file){
        var preview = $(template), 
            image = $('img', preview);

        var reader = new FileReader();

        image.width = 100;
        image.height = 75;

        reader.onload = function(e){
            image.attr('src',e.target.result);
        };

        reader.readAsDataURL(file);

        message.hide();
        preview.appendTo(dropbox);

        $.data(file,preview);
    }

    function showMessage(msg){
        message.html(msg);
    }
});

 

ali em var template, é onde é exibida a preview quando vc joga a imagem pra upload, na class lista100buttons etc são os botões edit e remove que eu criei e a funçao functionLink() foi uma gambiarra que tentei fazer pra trocar o link do botão ao passar o mouse em cima para a sessao que gravou em upload.php, mas isso só funciona após atualizar a página e enviar outra imagem.

Tem outro .js principal, pode ser visto aqui:

jquery-filedrop.js

 

upload.php

<?php
$diretorio = "caminho do diretório onde será feito o upload";
$arq_perm = array('jpg','jpeg','png','gif');
session_start();

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    exit_status('Erro! Método HTTP errado!');
}

if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){
	
    $imagem = $_FILES['pic'];
    
    if(!in_array(get_extension($imagem['name']),$arq_perm)){
        exit_status('Apenas arquivos dos tipos '.implode(',',$arq_perm).' são permitidos!');
    }

    if(move_uploaded_file($imagem['tmp_name'], $diretorio.$imagem['name'])){
        $_SESSION['imagem1'] = $imagem['name'];
		exit_status('Upload concluído com sucesso!');
    }     
}

exit_status('Aconteceu algum problema com o upload!');

function exit_status($str){
	echo json_encode(array('status'=>$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}
?>

Como pode ver, aqui é onde é feito o upload, coloquei pra salvar a sessão com o nome da imagem, só pra ver se aparecia no link, que seria a mesma coisa quando eu fizer pra enviar no banco e receber a id.

 

onde chama a função ao jogar a imagem para a box

<section>      
                                                                         
     <div id="dropbox">
           <span class="message">Arraste suas imagens aqui para upload. <br /><i>(Elas ficarão visíveis somente para você)</i></span>
     </div>
<script>												  function functionLink(){													  document.getElementById('areaid').href="<?php echo $_SESSION['imagem1']; ?>";
}												  </script>
                                                 
                                            </section>

 

Da pra ver o funcionamento oficial aqui, lá da pra analisar melhor os códigos.

Alguma ideia de como fazer com que o upload.php retorne o Nome da imagem(que depois será a id da imagem que foi adicionada no banco) para os links dos botões?

[angelorubin 142]

Boa tarde,

 

Você quer parar antes de enviar para pasta upload ou apagar depois que já foi enviado? faz mais sentido antes penso eu ...

[hvjohny 1]

Boa tarde,

 

Você quer parar antes de enviar para pasta upload ou apagar depois que já foi enviado? faz mais sentido antes penso eu ...

depois de ser enviado.

o negócio é o seguinte:

A pessoa vai colocar o nome da galeria, dar concluir e começar enviar as fotos pra essa galeria.

Porém, as fotos podem conter titulo,etc também. a ideia é fazer com que no botão edit, abra uma lightbox levando a id da imagem para acrescentar os dados. e no remove, contendo a id para a imagem ser removida.