Upload dinamico

vini_loock · Março 2, 2011

Ola.

Estou querendo fazer um sistema de upload um pouco mais dinâmico, só que sem usar o flash.

Funciona +/- assim:

tenho uma página pai, que inclui atraves de um iframe a pagina de upload.

Essa pagina de upload tem um input file e um submit, normal.

Mas o que eu quero fazer é algo parecido com o flash, que ao clicar no input file você adiciona os arquivos em uma lista e não no botão em si.

Achei esse plug-in que faz isso, mas não estou conseguindo copiar este efeito.

Pensei em fazer algo como: cada input file está dentro de um outro iframe e ao selecionar ele faz o upload automatico, mas não é bem isso que eu queria, queria que abaixo desses arquivos selecionados tivesse um input submit, que enviaria todos de uma só vez, assim se a pessoa selecionar um arquivo errado pode apenas deletar o input e não precisara deletar o arquivo do servidor.

Estou pensando, e me veio uma outra possivel solução:

Ao selecionar um arquivo, esse campo é automaticamente ocultado, e através do js pegar o nome dessa imagem, mas como fazer isso.

alguém tem alguma outra ideia de como eu posso fazer isso, ou a solução para essa segunda alternativa?

Vlw.

Vinicius

vini_loock · Março 2, 2011

Consegui fazer o que eu queria com jquery:

<html>
    <head>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var id = 1;
                var classe = 'claro';
                $('input:file.campo').live('change', function(){
                    var value = $(this).val();
                    var value = value.substring(value.lastIndexOf('\\')+1, value.lastIndexOf('.'));
                    var HTML = $('#names').html();
                    if(id%2 != 1){
                        classe = 'escuro';
                    }else{
                        classe = 'claro';
                    }
                    $('#names').html('<div id="arquivo" class="'+classe+'"><a href="'+id+'">x</a><p>'+value+'</p></div>'+HTML);
                    $(this).css('display', 'none');
                    id++;
                    $('#campos').append('<input type="file" name="files[]" id="'+id+'" class="campo" />');
                });
                $('#names #arquivo a').live('click', function(){
                    $('#campos input:file#'+$(this).attr('href')).remove();
                    $(this).parent().remove();
                    return false;
                });
            });
        </script>
        <style type="text/css">
            *{margin: 0px; padding: 0px;}
            form{width: 400px; height: 200px; background-color: #fff; border: 3px solid #336699; position: absolute; left: 50%; margin: 10px 0 0 -200px;}
            #campos{width: 400px; height: 40px; background: red; float: left;}
            #names{width: 100%; height: 120px; float: left; overflow: auto;}
                #names #arquivo{width: 100%; float: left;}
                #names #arquivo.claro{background-color: #f4f4f4;}
                #names #arquivo.escuro{background-color: #cccccc;}
                    #names #arquivo p{float: left; margin: 5px;}
                    #names #arquivo a{float: left; margin: 5px;}
            #inpSubmit{width: 400px; height: 40px; float: left; background: red;}
                #inpSubmit input{padding: 5px; background: #fff; border: none; font-weight: bold; margin: 5px 0 0 180px;}
        </style>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data">
            <input type="hidden" name="act" value="upload" />
            <div id="campos">
                <input type="file" name="files[]" id="1" class="campo" />
            </div>
            <div id="names"></div>
            <div id="inpSubmit">
                <input type="submit" value="upar" />
            </div>
        </form>
        
        <?php
            if(isset($_POST['act']) && $_POST['act'] == 'upload'){
                for($i = 0; $i < count($_FILES['files']); $i++){
                    echo $_FILES['files']['name'][$i] . '<br />';
                }
            }
        ?>
    </body>
</html>

Só uma coisa que me deu vontade de fazer, mas acho que com html+js não dá:

Sabe aqueles uploads em flash, que você pode selecionar várias imagens de um só vez? então é algo como aquele, da pra fazer com um pouco de js??

Vlw

Edit, realmente, não é possivel, apenas com html5

Editado Março 2, 2011 por vini_loock

rohde · Março 2, 2011

é só adaptar...

http://demo.swfupload.org/

vini_loock · Março 2, 2011

Vlw, eu conheço até alguns sistemas prontos em flash, mas a questão é que não sei programar muito em AS, e quero usar apenas o que eu fiz.

Não é nada de importante, é apenas uma brincadeira que estou fazendo, então não precisa de efeitos específicos.

Entrar

Upload dinamico

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

vini_loock

Link para o comentário

Compartilhar em outros sites

rohde

Link para o comentário

Compartilhar em outros sites

vini_loock

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades