Abrir caixa de diálogo de arquivo em JavaScript

Preciso de uma solução para exibir a caixa de diálogo de arquivo aberto em HTML enquanto clico em a div. A caixa de diálogo para abrir arquivo deve ser aberta quando o divfor clicado.

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

Aqui está um bom

Demonstração do Fine Uploader

É um <input type='file' />controle em si. Mas um div é colocado sobre ele e os estilos css são aplicados para obter essa sensação. A opacidade do controle de arquivo é definida como 0 para que pareça 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');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

para o IE adicione isto:

$("#logo").css('filter','alpha(opacity = 0');

Não sei por que 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, o inputé desativado quando escondido com display: none. Uma abordagem melhor seria usar position: fixed; top: -100em.

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

Se preferir, você pode ir a "maneira correta" , usando forna labelapontando para a idda entrada como esta:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

Na verdade, você não precisa de tudo isso com opacidade, visibilidade, <input>estilo etc. Basta dar uma olhada:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

Demo em jsFiddle . Testado no Chrome 30.0 e 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;
}

<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

Explicação: Posicionei a entrada do arquivo diretamente acima do elemento a ser clicado, de forma que qualquer clique iria parar nele ou em seu rótulo (que abre a caixa de diálogo de upload como se você clicasse no próprio rótulo). Tive alguns problemas com a parte do botão da entrada padrão saindo da lateral da etiqueta, portanto, overflow: hiddena entrada e display: inline-blocka etiqueta eram necessárias.

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

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

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

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

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

Primeiro adicione as tags head :

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

se você já tem script tags de , basta adicionar as funções acima.

Em suas tags de corpo ou formulário, adicionando:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

Não importa onde em seu html, é exatamente 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 em seu código ou xaml, mas em seu script ou código você não pode digitar o nome dele e depois ler uma propriedade ou chamar uma função, porque existem funções globais que fazem aquelas que não estão definidas no elemento input type = "file". Você só precisa fornecer a essas funções o id do tipo de entrada oculto = "arquivo" que é o nome da instância OpenFileDialog como string.

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

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

e se quiser remover a caixa de diálogo de arquivo aberto, você pode criar e usar a seguinte função:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

mas antes de remover a caixa de diálogo de arquivo aberto, verifique se ela existe criando e usando a seguinte função:

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

e se você não quiser criar e adicionar as caixas de diálogo de arquivo aberto nas tags do corpo ou do formulário no html, porque isso está adicionando tipo de entrada oculto = "arquivo" s, então você pode fazer isso no script usando a função criar 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 próximo ao seu corpo ou tags de formulário, você adicionou:

onload="yourBodyOrFormId_onload()"

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

DICA: você pode adicionar ao seu projeto ou site um novo arquivo JScript, se ainda não o fez, e neste arquivo você pode colocar todas as funções de diálogo de arquivo aberto longe das tags de script e da página html ou formulário da web e usar eles em seu html ou página de formulário da web a partir deste arquivo JScript, mas não se esqueça antes de vincular o html ou página de formulário da web ao arquivo JScript, é claro. Você pode fazer isso arrastando o arquivo JScript para a sua página html no cabeçalhoTag. Se a sua página for um formulário da web e não um html simples, e você não tiver tags head, coloque-a em qualquer lugar para que funcione. 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 ao seu html ou página de formulário da 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. Então, no arquivo JScript, você não precisa mais dar ao documento o id do corpo ou forma de uma página, apenas dê a ele o valor daquela variável. Você pode chamar essa variável de bodyId ou formId ou bodyOrFormId ou qualquer outro nome que desejar.

Boa sorte rapaz!

A maneira mais simples:

#file-input {
  display: none;
}

<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

O que é importante, o uso de display: nonegarante que nenhum lugar será ocupado pela entrada do arquivo oculto (o que acontece usando opacity: 0).

AFAIK você ainda precisa de um <input type="file">elemento, então você pode usar algumas das coisas do quirksmode para estilizá -lo

O único sem <input type="file">é incorporar um filme flash transparente sobre o div. Você pode então 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 FileReference.browse do flash .

Ele oferece uma dependência adicional em relação ao modo quirksmode, mas em troca você obtém muitos mais eventos (como eventos de progresso embutidos).

Pode utilizar

$('<input type="file" />').click()