3

A tag input é uma tag html, ou seja linguagem de marcação, no entanto essa tag executa instruções como de uma linguagem de programação.

Afinal como a tag "input file", faz para acessar o sistema operacional e trazer o arquivo selecionado?

Como alterar a mensagem:"Nenhum arquivo selecionado" sem javascript ?

3
  • 1
    Essas tags sinalizam para o navegador que ele deve fazer alguma coisa. A implementação da ação delas está no código fonte do navegador, não na página/aplicação Web que você faz. 5/05/2016 às 14:42
  • 2
    A pergunta está um pouco confusa, especialmente o último parágrafo que não parece ter relação com o resto. Não sei se dá para responder a pergunta facilmente, já que teria que explicar muita coisa, o que tornaria a pergunta muito ampla. Talvez dê para fazer um resumo, sei lá. Se melhorar a pergunta, deixando ela um pouco mais específica, fica mais fácil obter uma resposta.
    – Maniero
    5/05/2016 às 14:44
  • 1
    Não é muito bem direcionado a sua pergunta, mas como a dúvida beira para a ideia de "como o HTML é processado?", fica aqui um material amigável: html5rocks.com/pt/tutorials/internals/howbrowserswork 5/05/2016 às 15:39

2 Respostas 2

13

O input não é parte de uma linguagem de programação especifica, ele é parte de algo que chamamos interface (https://www.w3.org/TR/html-markup/input.file.html#input.file-interface), cada navegador tem um motor próprio de renderização que vai implementar esta interface cada qual é feito na sua propria linguagem de programação, a maioria dos motores são escritos em , mas existem motores que são escritos em ou .

Lista de motores mais populares

  • Chrome e Opera usam o motor Blink (fork do Webkit)
  • Safari usa o motor Webkit
  • InternetExplorer usa o motor Trident (descontinuado em favor do EdgeHTML e MS Edge)
  • Microsoft Edge usa o motor EdgeHTML
  • Firefox usa o motor Gecko

Quando você colocar um elemento assim dentro do html:

<input type="file">

O navegador inicialmente vai ler como texto, mas então ele vai processar o documento todo e começa a gerar o que chamamos de "widgets" (os widgets gerados baseados no sistema operacional ou não), isso pode ocorrer em quanto a página esta carregando ou somente quando ela termina de carregar (vai depender do tipo de buffer).

Não há como você manipular, a estrutura HTML e XML é renderizada pelo navegador e não por um script externo, os motores já são compilados, a única maneira de alterar de verdade seria criar o seu próprio motor, ou pegar um existente e modificar (tal como a google fez com o Webkit)

No entanto com CSS e HTML é possível simular um input customizado assim:

var fakeInput   = document.querySelector(".file-customizado");
var realInput   = document.querySelector(".file-customizado input[type=file]");
var selectLabel = document.querySelector(".file-customizado .label");
var pathFile    = document.querySelector(".file-customizado .path");

//Remove o path do arquivo, assim é exibido apenas o nome do arquivo
function basename(path) {
   path = String(path);
   var d = path.split(/\\|\//);
   return d[d.length - 1];
}

//O input customizado dispara o evento no input real
fakeInput.onclick = function() {
     realInput.click();
};

//O input detecta a troca de arquivo para mostrar que o input não esta vazio no label
realInput.onchange = function() {
    if (realInput.value) {
       selectLabel.className = "label hide";
       pathFile.innerHTML = basename(realInput.value);
       pathFile.className = "path";
    } else {
       pathFile.className = "path hide";
       selectLabel.className = "label";
    }
};
.file-customizado {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    width: 200px;
    background-color: #f00;
    color: #fff;
    display: inline-block;
    cursor: pointer;
}
.file-customizado input[type=file] {
    position: absolute;
    visibility: hidden;
    top: -9990px;
    left: -9999px;
}
.file-customizado .label, .file-customizado .path {
    display: block;
    padding: 10px 0;
    text-align: center;
}
.file-customizado .hide {
    display: none !important;
}
<div class="file-customizado">
    <input type="file" name="campo">
    <span class="label">Selecionar...</span>
    <span class="path hide"></span>
</div>

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    24/02/2017 às 18:44
0

O elemento input é próprio da linguagem de marcação HTML,e faz parte de um modelo para um conjunto de dados, o formulário, associado a um método e ação URI. HTML elements

O funcionameto para o acesso dos arquivos no sistema operacional ocorre resumidamente da seguinte forma:

Quando o usuário clica no botão relativo ao elemento "input file", o navegador faz uma requisição ao servidor (no caso o próprio sistema operacional), e estabelece uma conexão com o servidor através de um socket de rede.

Cada plataforma possui uma biblioteca Web com um script interno(ou interface) exemplo .Net Framework de modo a tornar a conexão possível, onde ocorre o apelidado handshake-aperto de mão.

Desta forma é feita uma chamada no Sistema Operacional (lado do servidor) que abre sua própria caixa de diálogos (no Windows OpenFileDialog) contendo uma lista de arquivos para seleção.

Após a seleção do arquivo, a transferência é realizada através do protocolo apropriado, HTTP ou outro dependendo do tipo de arquivo.

Alguns meta dados (nem todos) do(s) arquivo(s) selecionados ficam disponíveis para manipulação no browser.

O HTMLInputElement interface fornece propriedades especiais e métodos (para além do normal HTMLElement interface que ele também tem à sua disposição por herança) para manipular o layout e apresentação dos elementos de entrada.

A mensagem "Nenhum arquivo selecionado", faz parte do código interno do navegador e desconheço uma forma de alterá-la sem javascript.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .