Olá Pessoal! Hoje vou apresentar um outro plugin do jQuery que é muito útil e torna as aplicações mais interessantes.

Vira-e-mexe, precisamos fazer uploads múltiplos em nossas aplicações. Normalmente, esses uploads múltiplos são de fotos, mas também vejo muito upload múltiplo de arquivos, como no caso de servidores de arquivos ou web.

O Plugin MultiFile

O plugin MultiFile será o objeto deste post.

Claro que existem ótimos outros plugins para jQuery, inclusive com barras de progrressão feitas em Flash, mas vou deixar esses outros plugins para outra oportunidade.

O link acima é bastante explicativo e tem vários exemplos. Mesmo assim, gostaria de fazer alguns comentários.

Eu prefiro usar a forma de configuração dos exemplos 4 a 6, que utilizam somente o atributo class. Isso, porque a rigor, o atributo maxlenght não deve ser utilizado em inputs file. Além disso, o atributo accept normalmente é ignorado pelos browsers.

Outro ponto importante é sobre a linguagem (idioma) das mensagens. Como mostrado, temos a opção de utilizar a sintaxe:

class="multi {accept:'txt', max:1, STRING: {remove:'Remover',selected:'Selecionado: $file',denied:'Invalido arquivo de tipo $ext!'}}"

Para esses casos, precisamos do plugin MetaData. Certamente que nesse caso nossas aplicações ficam muito mais flexíveis pois podemos ter mensagens diferentes para cada ponto.

Mas se isso é um ponto positivo, eu também vejo-o como um ponto negativo: nós precisaremos de mais um plugin (mais processamento) e pode haver uma despadronização numa mesma aplicação, dependendo de como você faça a mudança do idioma.

Então, eu sugiro que façam como eu: modifiquem as mensagens para o idioma de sua preferência diretamente no código do plugin. Se você for fazer isso, terá que modificar as linhas 124, 125 e 126 do plugin. Vejam as originais:

E modifiquei, deixando assim:

Javascript Não-Obstrutivo

Quem lê meus artigos com freqüência já deve ter percebido que procuro sempre fazer meus scripts de forma que o javascript fique não obstrutivo (ou obstrusivo, como alguns preferem). Assim, sugiro que façam mais ou menos isso:

<input type="file" id="arquivos" name="arquivos" class="multi limit-5 accept-jpg|gif|bmp|png" /><br />
<input type="file" id="arquivos_ocultos1" name="arquivos_ocultos1" class="ocultos" /><br />
<input type="file" id="arquivos_ocultos2" name="arquivos_ocultos2" class="ocultos" /><br />
<input type="file" id="arquivos_ocultos3" name="arquivos_ocultos3" class="ocultos" /><br />
<input type="file" id="arquivos_ocultos4" name="arquivos_ocultos4" class="ocultos" /><br />

E no Javascript, ocultem os inputs file que têm class=”oculto”.

$("input[@type=file].ocultos").hide();

Assim, quando o Javascript estiver desabilitado, você continuará com 5 inputs file.

Claro que no seu código server-side, você terá que fazer o mesmo tratamento para os uploads. Eu sugiro um código PHP como esse:

foreach ($_FILES as $arquivo => $valores) {
    if ( empty( $valores["name"] ) ) {
        unset( $_FILES[$arquivo] );
    } else {
        if( eregi( "^image\/(jpg|png|gif|bmp)$", $valores["type"] ) ) {
            $novo_path = "fotos".DIRECTORY_SEPARATOR.strtolower( $valores["name"] );
            move_uploaded_file( $valores["tmp_name"], $novo_path );
        }
    }
}

Da forma que está, você não precisa se preocupar se os nomes dos inputs serão os ocultos ou os gerados pelo javascript!

Conclusão

Um script de upload múltiplo é sempre bom ter ao alcance das mãos. Espero que esse plugin ajude e que este artigo sirva para eliminar alguns processos de “bateção de cabeça” que alguns possam estar se deparando.

Amplexos!