Caixa de diálogo Abrir arquivo em JavaScript

Eu preciso de uma solução para exibir o diálogo de arquivo aberto em HTML, enquanto clica em um div . A checkbox de diálogo abrir arquivo deve abrir quando o div for clicado.

Não quero exibir a checkbox do arquivo de input como parte da página HTML. Ele deve ser exibido em uma checkbox de diálogo separada, que não faz parte da página da web.

Aqui está um bom

Demonstração do Fine Uploader

É um controle . Mas uma div é colocada sobre isso e os estilos css são aplicados para obter essa sensação. A opacidade do controle de arquivos é definida como 0, de modo que parece que a janela de diálogo é aberta ao clicar no div.

  $("#logo").css('opacity','0'); $("#select_logo").click(function(e){ e.preventDefault(); $("#logo").trigger('click'); }); 
    

Eu não sei porque ninguém apontou isso, mas aqui está uma maneira de fazer isso sem qualquer Javascript e também é compatível com qualquer navegador.


EDIT: No Safari, a input fica desativada quando oculta com display: none . Uma abordagem melhor seria usar position: fixed; top: -100em position: fixed; top: -100em .


  

Se preferir, você pode usar o “caminho correto” usando o label aponta para o id da input, desta forma:

   

Na verdade, você não precisa de todo esse material com opacidade, visibilidade, , etc. Basta dar uma olhada:

 Just click me.  

Demonstração no jsFiddle . Testado no Chrome 30.0 e no Firefox 24.0. Não funcionou no Opera 12.16, no entanto.

Isso é o que funcionou melhor para mim (testado no IE8, FF, Chrome, Safari).

 #file-input { cursor: pointer; outline: none; position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; filter: alpha(opacity=0); /* IE < 9 */ opacity: 0; } .input-label { cursor: pointer; position: relative; display: inline-block; } 
  

E se o javascript estiver desativado na máquina do cliente? Use a seguinte solução para todos os cenários. Você não precisa nem de javascript / jQuery. :

HTML

  

CSS

 #fileInput{opacity:0} body{ background:cadetblue; } 

Explicação: for="Your input Id" . Os acionadores clicam em evento por padrão por HTML. Então, por padrão, aciona o evento click, sem necessidade de jQuery / javascript. Se é simplesmente feito por HTML, por que usar jQuery / jScript? E você não pode dizer se o cliente desabilitou o JS. Seu recurso deve funcionar mesmo que o JS esteja desativado.

Trabalhando jsFiddle (você não precisa JS, jquery)

Primeiro adicione as tags principais :

  

Se você já tiver tags de script , basta adicionar essas funções acima.

Em seu corpo ou tags de formulário, adicione:

  

Não importa onde no seu html, é assim que você criou uma nova instância do tipo OpenFileDialog class como variável global , cujo nome é o id do elemento, não importa onde no seu código ou xaml, mas no seu script ou código , você não pode digitar o nome dele e ler uma propriedade ou chamar uma function, porque existem funções globais que fazem aquelas que não estão definidas no elemento input type = “file”. Você apenas tem que dar a essas funções o id da input oculta type = “file”, que é o nome da ocorrência de OpenFileDialog como string.

Para facilitar a sua vida na criação de instâncias de diálogos de arquivos abertos para o seu html, você pode criar uma function que faça isso:

 function createAndAddNewOpenFileDialog(name) { document.getElementById("yourBodyOrFormId").innerHtml += "" } 

e se você quiser remover a checkbox de diálogo Abrir arquivo, você pode fazer e usar a seguinte function:

 function removeOpenFileDialog(name) { var html = document.getElementById("yourBodyOrFormId").innerHtml; html = html.replace("", ""); document.getElementById("yourBodyOrFormId").innerHtml = html; } 

mas antes de você remover a checkbox de diálogo abrir arquivo, assegure-se de que ela exista fazendo e usando a seguinte function:

 function doesOpenFileDialogExist(name) { return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("") != -1 } 

e se você não quiser criar e adicionar as checkboxs de diálogo de arquivo aberto no corpo ou tags de formulário no html, porque isso está adicionando input = “file”, então você pode fazê-lo no script usando a function create acima :

 function yourBodyOrFormId_onload() { createAndAddNewOpenFileDialog("openFileDialog1"); createAndAddNewOpenFileDialog("openFileDialog2"); createAndAddNewOpenFileDialog("openFileDialog3"); createAndAddNewOpenFileDialog("File Upload"); createAndAddNewOpenFileDialog("Image Upload"); createAndAddNewOpenFileDialog("bla"); //etc and rest of your code } 

Certifique-se de que perto do seu corpo ou tags de formulário, você adicionou:

 onload="yourBodyOrFormId_onload()" 

Você não precisa fazer essa linha acima, se você já fez isso.

DICA: Você pode adicionar ao seu projeto ou site o novo Arquivo JScript, se ainda não tiver, e nesse arquivo você pode colocar todas as funções de diálogo de arquivo aberto longe das tags de script e da página de formulário html ou web, e usar -los em sua página de formulário html ou web a partir deste arquivo JScript, mas não se esqueça antes de vincular a página de formulário html ou web para o arquivo JScript, é claro. Você pode fazer isso apenas arrastando o arquivo JScript para sua página html nas tags head . Se a sua página é em formato web e não simples, e você não tem tags principais, coloque-a em qualquer lugar para que ela possa funcionar. Não se esqueça de definir a variável global nesse arquivo JScript, cujo valor será seu corpo ou id de formulário como string. Depois de vincular o arquivo JScript à página de formulário html ou web, você pode carregar o evento de seu corpo de formulário, definir o valor dessa variável para seu corpo ou id de formulário. Em seguida, no arquivo JScript, você não precisa mais dar ao documento o id do corpo ou forma de uma página, apenas forneça o valor dessa variável. Você pode chamar essa variável bodyId ou formId ou bodyOrFormId ou qualquer outro nome que desejar.

Boa sorte rapaz!

Pode ser que você esteja interessado nisso: http://code.google.com/p/upload-at-click/

Ao clicar no elemento será aberto diálogo ‘Abrir arquivo’ e

executar function personalizada.

AFAIK você ainda precisa de um elemento , então você pode usar algumas das coisas do quirksmode para estilizar

O único sem é embutir um filme flash transparente sobre o div. Em seguida, você pode usar um evento de clique gerado pelo usuário (compatível com as novas regras de segurança do Flash 10) para acionar uma chamada para o FileReference.browse do flash.

Ele oferece uma dependência adicional sobre o modo quirksmode, mas, em troca, você obtém muito mais events (como events integrados em andamento).

O caminho mais simples:

 #fileInput { display: none; }