Trabalhar
com pré-carregamento de arquivos na web é um ponto complicado, pois existem
diferenças entre os browsers. Por exemplo, o firefox, safari, opera, chrome e o
IE (a partir do 7, inclusive) não disponibiliza o caminho completo de um
arquivo quando escolhido. O IE 6 possui a particularidade de disponibilizar o
path completo de um arquivo mas, como o IE não é mais usado em larga escala não
pode ser pego como exemplo. Os navegadores atuais não disponibilizam o caminho
completo do arquivo por uma questão de segurança.
Para que
possamos entender como podemos realizar o pré-carregamento de arquivos em cache
usando JavaScript, vamos criar uma página de exemplo.
pagina-upload.html
<html>
<head>
<script type="text/javascript">
var conteudo = "Tamanho do arquivo: ";
</script>
</head>
<body>
<form action="algumacoisaaqui" method="post" enctype="multipart/form-data">
<input type="file" name="inputfile1" size="70" id="inputfile1" />
<input type="button" name="botaolimpar" id="botaolimpar" value="Remover" title="Remover" onclick="remover()" />
<br/>
<br/>
<input type="button" name="botaocarregar" id="botaocarregar" value="Carregar" title="Carregar" onclick="carregar()" />
<div id="divResultado">
</div>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var conteudo = "Tamanho do arquivo: ";
</script>
</head>
<body>
<form action="algumacoisaaqui" method="post" enctype="multipart/form-data">
<input type="file" name="inputfile1" size="70" id="inputfile1" />
<input type="button" name="botaolimpar" id="botaolimpar" value="Remover" title="Remover" onclick="remover()" />
<br/>
<br/>
<input type="button" name="botaocarregar" id="botaocarregar" value="Carregar" title="Carregar" onclick="carregar()" />
<div id="divResultado">
</div>
</form>
</body>
</html>
Essa página possui um campo do tipo file, um
botão (botão carregar) para que o pré-carregamento seja feito e um botão para
limpar o campo de upload (botão remover). Toda a lógica do pré-carregamento
está na função (função carregar) associada ao onclick do botão "Carregar", o
botão "Remover" também possui uma função (função remover) associada ao seu
evento onclick.
Função carregar
function carregar(){
var inputFile = document.getElementById("inputfile1");
var divResultado = document.getElementById("divResultado");
var limite = 15000;
if(navigator.appName == "Microsoft Internet Explorer"){
var imagem = new Image();
imagem.src = inputFile.value;
var tamanhoArquivo = imagem.fileSize;
if(tamanhoArquivo < 0){
carregar();
} else {
conteudo += tamanhoArquivo + " bytes <br/> Limite Permitido: 15000 bytes <br/>";
if(tamanhoArquivo > limite){
conteudo += "Arquivo acima do limite";
} else {
conteudo += "Arquivo abaixo do limite";
}
}
}else{
conteudo += inputFile.files[0].size + " bytes <br/> Limite Permitido: 15000 bytes <br/>";
if(parseInt(inputFile.files[0].size) > limite){
conteudo += "Arquivo acima do limite";
} else {
conteudo += "Arquivo abaixo do limite";
}
}
divResultado.innerHTML = conteudo;
}
var inputFile = document.getElementById("inputfile1");
var divResultado = document.getElementById("divResultado");
var limite = 15000;
if(navigator.appName == "Microsoft Internet Explorer"){
var imagem = new Image();
imagem.src = inputFile.value;
var tamanhoArquivo = imagem.fileSize;
if(tamanhoArquivo < 0){
carregar();
} else {
conteudo += tamanhoArquivo + " bytes <br/> Limite Permitido: 15000 bytes <br/>";
if(tamanhoArquivo > limite){
conteudo += "Arquivo acima do limite";
} else {
conteudo += "Arquivo abaixo do limite";
}
}
}else{
conteudo += inputFile.files[0].size + " bytes <br/> Limite Permitido: 15000 bytes <br/>";
if(parseInt(inputFile.files[0].size) > limite){
conteudo += "Arquivo acima do limite";
} else {
conteudo += "Arquivo abaixo do limite";
}
}
divResultado.innerHTML = conteudo;
}
Função remover
function remover(){
var inputFile = document.getElementById("inputfile1");
/* passo false como parametro porque nao quero que os child nodes daquele elemento sejam clonados, como o input nao possui child nodes passo false*/
var inputFileNovo = inputFile.cloneNode(false); //clono o elemento
inputFileNovo.type = "file";
inputFileNovo.value = "";
inputFile.parentNode.replaceChild(inputFileNovo,inputFile); //troco o input antigo pelo novo
document.getElementById("divResultado").innerHTML = "";
}
var inputFile = document.getElementById("inputfile1");
/* passo false como parametro porque nao quero que os child nodes daquele elemento sejam clonados, como o input nao possui child nodes passo false*/
var inputFileNovo = inputFile.cloneNode(false); //clono o elemento
inputFileNovo.type = "file";
inputFileNovo.value = "";
inputFile.parentNode.replaceChild(inputFileNovo,inputFile); //troco o input antigo pelo novo
document.getElementById("divResultado").innerHTML = "";
}
É possível notar na função carregar que um
tratamento diferenciado é feito se o navegador é IE, esse tratamento é feito
porque no IE não é possível manipular direto o elemento do DOM, é necessário
que um objeto do tipo Image seja criado. Como nesse exemplo estamos lidando com
somente um campo, não é perceptível a queda de performance devido a criação do
objeto, causando assim gasto de memória mas, se várias instâncias forem criadas
e o pré-carregamento feito em cache, será possível notar a lentidão. Conclusão,
realizar o pré-carregamento de arquivos em cache no IE é muito mais custoso do
que realizar em outro navegador.
Nenhum comentário:
Postar um comentário