Visualizar arquivos selecionados pela tag input type file
04/05/2016
0
Boa Noite, minha dúvida é a seguinte:
Na tag input, quando seleciono 1 ou mais arquivos para upload, o input vem com uma mensagem(Nenhum arquivo selecionado) e quando seleciono o arquivo ele mostra 1 ou 2 ou 3 arquivos selecionados. Isto posto (Sergio Waibe é engraçado) ,
como posso mostrar o nome dos arquivos, sendo que no caso de 1 arquivo ele mostra o nome automaticamente, mas no caso de mais arquivos ele só mostra a quantidade? Se possível sem javascript...
Resumindo , quero colocar o <input type="file" name="arquivo[]" multiple="multiple" /> e quero que ao selecionar os arquivos da janela do Sistema Operacional apareça o nome dos arquivos. Se possível apenas HTML, CSS e PHP, É possível ???
Na tag input, quando seleciono 1 ou mais arquivos para upload, o input vem com uma mensagem(Nenhum arquivo selecionado) e quando seleciono o arquivo ele mostra 1 ou 2 ou 3 arquivos selecionados. Isto posto (Sergio Waibe é engraçado) ,
como posso mostrar o nome dos arquivos, sendo que no caso de 1 arquivo ele mostra o nome automaticamente, mas no caso de mais arquivos ele só mostra a quantidade? Se possível sem javascript...
Resumindo , quero colocar o <input type="file" name="arquivo[]" multiple="multiple" /> e quero que ao selecionar os arquivos da janela do Sistema Operacional apareça o nome dos arquivos. Se possível apenas HTML, CSS e PHP, É possível ???
Magic
Curtir tópico
+ 2
Responder
Post mais votado
04/05/2016
Lembre-se que o HTML 5 não funciona em todas versões de todos os browsers.
Veja um exemplo que você pode adaptar a sua necessidade:
Veja um exemplo que você pode adaptar a sua necessidade:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#click').click(function(){
var files = $('input#files')[0].files;
var names = "";
$.each(files,function(i, file){
names += file.name + "<br/>";
});
document.getElementById("result").innerHTML = names;
});
});//]]>
</script>
</head>
<body>
<form action='server.php' method='post' enctype='multipart/form-data' >
<input id="files" name='files[]' type='file' multiple>
<input type='button' value="Click para mostrar Arquivos" id="click">
<div id="result" />
</form>
</body>
</html>
Jothaz
Responder
Mais Posts
05/05/2016
Magic
Justamente por querer não depender dos Browsers que eu pensava em uma solução server-side. No entanto realmente parece ser a única solução "conhecida".
Não acredito ser impossível, pois mesmo que desabilitemos o javascript no browser, o input em sua origem já realiza a ação solicitada, ou seja, ele por si só já oferece os nomes dos arquivos, pois quando você passa o mouse por sobre o texto "4 arquivos selecionados" ele apresenta os nomes dos arquivos no caso do input multiple, no caso no input normal, aquele que apenas 1 arquivo é selecionado, ele também trás o nome desse arquivo.
Não sei se me expressei direito na minha questão. Mas como outro exemplo daquilo que pretendo saber é:
Ao lado do botão input vem uma mensagem :"Nenhum arquivo foi selecionado", como alterar essa mensagem ?
Jothaz, agradeço sua atenção e tenho certeza que sua solução funciona, no entanto o objetivo não é uma solução e sim entender como funciona o código por trás do input.
<b>Qual linguagem o input usa para acessar o sistema operacional, abrir a janela para escolha de arquivos, e trazer os nomes dos arquivos selecionados. </b>
Naturalmente ele já faz isso, mas não temos como manipular, a não ser com o javascript.
O meu interesse é saber como o input funciona na sua forma mais baixa de linguagem, pois embora seja uma tag html, ela possui instruções de alguma outra linguagem, talvez C ! Não sei, mas é o tipo de dúvida que vou me aprofundar até encontrar o seu funcionamento real e desnudo.
Embora a internet hoje, pregue a colaboração, a dependência é algo que procuro evitar, imagine se amanhã, o Gov brasileiro, resolve bloquear o google, como fez com o Watsapp ? Então esse link de api script do google cai por água.
Sei que em termos de produtividade, e tudo mais, é impensável não usar script client-side, no entanto meu questionamento, é apenas para base de estudo aprofundado do funcionamento, por trás das abstrações.
Grato Jothaz.
Não acredito ser impossível, pois mesmo que desabilitemos o javascript no browser, o input em sua origem já realiza a ação solicitada, ou seja, ele por si só já oferece os nomes dos arquivos, pois quando você passa o mouse por sobre o texto "4 arquivos selecionados" ele apresenta os nomes dos arquivos no caso do input multiple, no caso no input normal, aquele que apenas 1 arquivo é selecionado, ele também trás o nome desse arquivo.
Não sei se me expressei direito na minha questão. Mas como outro exemplo daquilo que pretendo saber é:
Ao lado do botão input vem uma mensagem :"Nenhum arquivo foi selecionado", como alterar essa mensagem ?
Jothaz, agradeço sua atenção e tenho certeza que sua solução funciona, no entanto o objetivo não é uma solução e sim entender como funciona o código por trás do input.
<b>Qual linguagem o input usa para acessar o sistema operacional, abrir a janela para escolha de arquivos, e trazer os nomes dos arquivos selecionados. </b>
Naturalmente ele já faz isso, mas não temos como manipular, a não ser com o javascript.
O meu interesse é saber como o input funciona na sua forma mais baixa de linguagem, pois embora seja uma tag html, ela possui instruções de alguma outra linguagem, talvez C ! Não sei, mas é o tipo de dúvida que vou me aprofundar até encontrar o seu funcionamento real e desnudo.
Embora a internet hoje, pregue a colaboração, a dependência é algo que procuro evitar, imagine se amanhã, o Gov brasileiro, resolve bloquear o google, como fez com o Watsapp ? Então esse link de api script do google cai por água.
Sei que em termos de produtividade, e tudo mais, é impensável não usar script client-side, no entanto meu questionamento, é apenas para base de estudo aprofundado do funcionamento, por trás das abstrações.
Grato Jothaz.
Responder
05/05/2016
Jothaz
Me perdoe a franqueza, mas o post ficou ainda mais confuso que o original.
Contudo vamos por partes.
Apresentei a solução em JavaScript pelo que estava descrito no post inicial.
Quanto ao receio de desabilitar o JavaScript, entendo seu ponto de vista, mas hoje sem JavaScript ativado você não vai muito longe, pois todos os sites usam recursos de JavaScript. Já se foi o tempo em que isto era tabu. E tem como você verificar se o JavaScritp esta ou não ativado.
Você disse que não quer depender dos browsers, mas não tem como pois a web é baseada em browser e a solução do jQuery garante ser crossbrowser, foi por isto inclusive que lhe sugeri. Executar o que eu fiz no javaScritp no servidor certamente será possível, mas ai ter de existir um response e não sei como isto afetaria a funcionalidade. Uma coisa é certa você não terá muito controle sobre a tag imput file, pois ela tem sua próprias restrições. É o mesmo que acontece ao imprimir uma página web, muitos detalhes não podem ser customizados.
Com relação a referencia ao arquivo do jQuery no repositório on line.
Só usei desta forma por conforto, todavia nada o impede de efetuar o download do arquivo e deixá-lo no seu servidor. E assim sues problemas se acabaram.
Na minha humilde opinião você esta "neurado" por demais com uma coisa que não tem tanta relevância. Pois a internet pode ficar indisponível por vários motivos nos quais você não terá nenhum poder de inferência. Quando se opta por disponibilizar algum serviço em rede (WEB) você terá de prever vários tipos de mitigação para contingências que possam ocorrer. Então você terai de ter 3 link de empresas diferentes para garantir que se um sair do ar outros seja usados. Só que todas as empresas que provem internet usam a infraestrutura uma das outras e dependendo do problema pode ser que seus 3 links fiquem fora do ar. Então problemas vão ocorre isto é certo e nada funciona 100%.
Com relação a:
Não entendi o que você pretende? É mudar a mensagem para uma mensagem personalizada e sumir com a mensagem?
O acesso a caixa de dialogo arquivo acredito que seja feito por API do sistema operacional. Os browsers acredito que são desenvolvidos em C, C++ e até Assembler e a não ser que você crie um plugin, ou desenvolver seu próprio browser, não acredito que poderá inferir no comportamento do browser com alguma linguagem back-end.
Sinceramente vejo projetos em TI como business que envolve: custos, prazos e benéficos. É como as empresas veem, então não tenho por hábito reinventar a roda. Pode parecer uma postura conformista, mas não é. A não ser que seja uma questão estratégia uma empresa não irá investir em um estudo para "desnudar" algo que funciona e atende, mesmo que não seja customizado ou personalizado. O tempo , esforço e dinheiro gasto nisto tem muito mais retorno melhorando funcionalidades ou criando novos sistemas.
Na minha opinião eu desprenderia todo este esforço e angariar conhecimento em outras tecnologias. Não quero com isto desqualificar ou desmerecer seu projeto de estudo e te desejo boa sorte e êxito, porém nunca me aprofundei neste assunto e não tenho subsídios para auxiliá-lo.
Contudo vamos por partes.
Se possível apenas HTML, CSS e PHP, É possível ???
Apresentei a solução em JavaScript pelo que estava descrito no post inicial.
Quanto ao receio de desabilitar o JavaScript, entendo seu ponto de vista, mas hoje sem JavaScript ativado você não vai muito longe, pois todos os sites usam recursos de JavaScript. Já se foi o tempo em que isto era tabu. E tem como você verificar se o JavaScritp esta ou não ativado.
Você disse que não quer depender dos browsers, mas não tem como pois a web é baseada em browser e a solução do jQuery garante ser crossbrowser, foi por isto inclusive que lhe sugeri. Executar o que eu fiz no javaScritp no servidor certamente será possível, mas ai ter de existir um response e não sei como isto afetaria a funcionalidade. Uma coisa é certa você não terá muito controle sobre a tag imput file, pois ela tem sua próprias restrições. É o mesmo que acontece ao imprimir uma página web, muitos detalhes não podem ser customizados.
Com relação a referencia ao arquivo do jQuery no repositório on line.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Só usei desta forma por conforto, todavia nada o impede de efetuar o download do arquivo e deixá-lo no seu servidor. E assim sues problemas se acabaram.
Na minha humilde opinião você esta "neurado" por demais com uma coisa que não tem tanta relevância. Pois a internet pode ficar indisponível por vários motivos nos quais você não terá nenhum poder de inferência. Quando se opta por disponibilizar algum serviço em rede (WEB) você terá de prever vários tipos de mitigação para contingências que possam ocorrer. Então você terai de ter 3 link de empresas diferentes para garantir que se um sair do ar outros seja usados. Só que todas as empresas que provem internet usam a infraestrutura uma das outras e dependendo do problema pode ser que seus 3 links fiquem fora do ar. Então problemas vão ocorre isto é certo e nada funciona 100%.
Com relação a:
Ao lado do botão input vem uma mensagem :"Nenhum arquivo foi selecionado", como alterar essa mensagem ?
Não entendi o que você pretende? É mudar a mensagem para uma mensagem personalizada e sumir com a mensagem?
O acesso a caixa de dialogo arquivo acredito que seja feito por API do sistema operacional. Os browsers acredito que são desenvolvidos em C, C++ e até Assembler e a não ser que você crie um plugin, ou desenvolver seu próprio browser, não acredito que poderá inferir no comportamento do browser com alguma linguagem back-end.
Sinceramente vejo projetos em TI como business que envolve: custos, prazos e benéficos. É como as empresas veem, então não tenho por hábito reinventar a roda. Pode parecer uma postura conformista, mas não é. A não ser que seja uma questão estratégia uma empresa não irá investir em um estudo para "desnudar" algo que funciona e atende, mesmo que não seja customizado ou personalizado. O tempo , esforço e dinheiro gasto nisto tem muito mais retorno melhorando funcionalidades ou criando novos sistemas.
Na minha opinião eu desprenderia todo este esforço e angariar conhecimento em outras tecnologias. Não quero com isto desqualificar ou desmerecer seu projeto de estudo e te desejo boa sorte e êxito, porém nunca me aprofundei neste assunto e não tenho subsídios para auxiliá-lo.
Responder
05/05/2016
Magic
Show meu amigo, muito obrigado pela sua opinião, é realmente o mais eficiente. Não tinha reparado no seu Avatar, agora passo a respeitá-lo ainda mais.
Tenho esse problema da roda, mas não de reinventá-la, mas de saber como foi projetada, com quais equações matemáticas.
Dei uma fuçada e percebi que é justamente o que se falou, uma API do SO, sendo no caso do windows .NET framework com as linguagens C#, C++, F# e VB.
Seguindo está árvore, abaixo: (que se parece com javascript)
Inheritance Hierarchy
System::Object
System.Web.UI::Control
System.Web.UI.HtmlControls::HtmlControl
System.Web.UI.HtmlControls::HtmlInputControl
System.Web.UI.HtmlControls::HtmlInputFile
o seguinte link mostra exatamente onde eu queria chegar.
https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlinputfile.aspx
O fato de eu buscar tanta profundidade, é por que quero me especializar em segurança e porque quero entender o que há por trás das abstrações.
Mais 1 vez muito obrigado por transmitir seu conhecimento, nota 10. Tem como dar nota? kkk
Agora como mudar a mensagem : "Nenhum arquivo foi selecionado" ou mesmo estiliza-lá com css, Quero colocar "Nenhuma roda foi inventada".... Pode ser com javascript mesmo.
Desculpe minha confusão e ignorância, mas me apaixonei por computação recentemente e entre as tensões elétricas manipuladas pelo binário e as aplicações do usuário há um grande caminho de complexidade, que irei decifrar, claro sempre com a ajuda de mentes como a sua.
Valeu de verdade.
Tenho esse problema da roda, mas não de reinventá-la, mas de saber como foi projetada, com quais equações matemáticas.
Dei uma fuçada e percebi que é justamente o que se falou, uma API do SO, sendo no caso do windows .NET framework com as linguagens C#, C++, F# e VB.
Seguindo está árvore, abaixo: (que se parece com javascript)
Inheritance Hierarchy
System::Object
System.Web.UI::Control
System.Web.UI.HtmlControls::HtmlControl
System.Web.UI.HtmlControls::HtmlInputControl
System.Web.UI.HtmlControls::HtmlInputFile
o seguinte link mostra exatamente onde eu queria chegar.
https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlinputfile.aspx
O fato de eu buscar tanta profundidade, é por que quero me especializar em segurança e porque quero entender o que há por trás das abstrações.
Mais 1 vez muito obrigado por transmitir seu conhecimento, nota 10. Tem como dar nota? kkk
Agora como mudar a mensagem : "Nenhum arquivo foi selecionado" ou mesmo estiliza-lá com css, Quero colocar "Nenhuma roda foi inventada".... Pode ser com javascript mesmo.
Desculpe minha confusão e ignorância, mas me apaixonei por computação recentemente e entre as tensões elétricas manipuladas pelo binário e as aplicações do usuário há um grande caminho de complexidade, que irei decifrar, claro sempre com a ajuda de mentes como a sua.
Valeu de verdade.
Responder
05/05/2016
Jothaz
O avatar foi feito pelo meu sobrinho de 8 anos, quer apesar da idade tem muita coisa em comum comigo e é um grande companheiro. Apesar de lhe ser negado assistir South Park (do qual gosto profundamente) ele é fã também. Acredito que ele já deve ter assistido, pois vive no Youtube. Eu até gostaria de assistir com ele, só que tenho que esperar ele ficar mais velho.
Pois conversando as coisas vão se aclarando.
Agora entendi seu objetivo e se eu soubesse que estaria disposta a usar .Net a conversaria seria outra. Atualmente atuo mais como consultor e analista de negócio, mas gosto de desenvolver e tenho uma predileção pelo .Net e Ruby. A questão de reinventar a roda foi somente uma analogia, eu mesmo as vezes me pego neste dilema por ser perfeccionista.
E segurança é um dos campos mais promissores da atualidade.
Desculpe-me por não ter contribuído mais e mais mais um vez que você logre êxito e conquiste seus objetivos.
Pois conversando as coisas vão se aclarando.
Agora entendi seu objetivo e se eu soubesse que estaria disposta a usar .Net a conversaria seria outra. Atualmente atuo mais como consultor e analista de negócio, mas gosto de desenvolver e tenho uma predileção pelo .Net e Ruby. A questão de reinventar a roda foi somente uma analogia, eu mesmo as vezes me pego neste dilema por ser perfeccionista.
E segurança é um dos campos mais promissores da atualidade.
Desculpe-me por não ter contribuído mais e mais mais um vez que você logre êxito e conquiste seus objetivos.
Responder
Clique aqui para fazer login e interagir na Comunidade :)
