Cuadro de diálogo Abrir archivo en JavaScript

    $("#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 IE añadir esto:

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

No sé por qué nadie ha señalado esto, pero aquí es una manera de hacerlo sin ningún Javascript y también es compatible con cualquier navegador.

EDITAR: En Safari, el input se deshabilita cuando se oculta con display: none. Un mejor enfoque sería utilizar position: fixed; top: -100em.

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

Si lo prefieres puedes ir por el "camino correcto" usando for en el label apuntando al id de la entrada así:

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

En realidad, no necesitas todas esas cosas con opacidad, visibilidad, estilo <input>, etc. Solo echa un vistazo:

<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 en jsFiddle. Probado en Chrome 30.0 y Firefox 24.0. Sin embargo, no funcionó en Opera 12.16.

Esto es lo que funcionó mejor para mí (Probado en 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>

Explicación: Coloqué la entrada del archivo directamente sobre el elemento al que se hizo clic, por lo que cualquier clic aterrizaría en él o en su etiqueta (que abre el diálogo de carga como si hiciera clic en la etiqueta misma). Tuve algunos problemas con la parte del botón de la entrada predeterminada que sobresalía del lado de la etiqueta, por lo que overflow: hidden en la entrada y display: inline-block en la etiqueta eran necesario.

¿Qué pasa si javascript está desactivado en la máquina de los clientes? Utilice la siguiente solución para todos los escenarios. Ni siquiera necesita 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;
}

Explicación : for="Your input Id" . Desencadenadores haga clic en evento de forma predeterminada por HTML. Por lo tanto, por defecto desencadena un evento de clic, sin necesidad de jQuery / javascript. Si es simplemente hecho por HTML ¿por qué usar jQuery / JScript? Y no puedes saber si el cliente deshabilitó a JS. Tu función debería funcionar aunque JS esté activado fuera.

JsFiddle de trabajo (No necesitas JS, jquery)

Primero agregue en la cabeza etiquetas:

<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>

Si ya tiene etiquetas script, simplemente agregue estas funciones arriba.

En su cuerpo o forma etiquetas añadiendo:

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

No importa dónde en su html, es simplemente así ha creado una nueva instancia de tipo OpenFileDialog class como global variable, cuyo nombre es el id del elemento, no importa dónde en su código o xaml, pero en su script o código, no puede escribir su nombre, y luego leer una propiedad o llamar a una función, porque hay funciones globales que hacen aquellas que no están definidas en el elemento input type="file". Solo tiene que dar a estas funciones el id de la entrada oculta type = "file" que es el nombre de la instancia OpenFileDialog como cadena.

Para facilitar su vida en la creación de instancias de diálogo de archivo abierto en su html, puede crear una función que lo haga:

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

Y si desea eliminar el archivo abierto diálogo, entonces usted puede hacer y utilizar la siguiente función:

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;
}

Pero antes de eliminar el diálogo abrir archivo, asegúrese de que existe haciendo y utilizando la siguiente función:

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

Y si no desea crear y agregar los cuadros de diálogo abrir archivo en las etiquetas body o form en el html, porque esto es agregar entradas ocultas type = "file" s, entonces puede hacerlo en script utilizando la función crear anterior:

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

Asegúrese de que cerca de su cuerpo o forma etiquetas, usted añadido:

onload="yourBodyOrFormId_onload()"

No tienes que hacer esta línea de arriba, si ya lo hiciste.

CONSEJO: Puede agregar a su proyecto o sitio web un nuevo archivo JScript, si aún no lo tiene, y en este archivo puede colocar todas las funciones de diálogo abrir archivo lejos de las etiquetas script y la página html o formulario web, y usarlas en su página html o formulario web desde este archivo JScript, pero no olvide antes vincular la página html o formulario web al archivo JScript, por supuesto. Puedes hacerlo simplemente arrastrando el archivo JScript a su página html en las etiquetas head. Si tu página es de forma web y no es html simple, y no tienes etiquetas de cabeza, ponla en cualquier lugar para que pueda funcionar. No olvide definir la variable global en ese archivo JScript, cuyo valor será su id de cuerpo o formulario como cadena. Después de vincular el archivo JScript a su página html o formulario web, puede descargar el evento de su cuerpo del formulario, establecer el valor de esa variable en su id de cuerpo o formulario. Luego en el JScript Archivo, usted no tiene que dar al documento el id del cuerpo o forma de una página más, sólo darle el valor de esa variable. Usted puede llamar a esa variable bodyId o formId o bodyOrFormId o cualquier otro nombre que desee.

Buena suerte hombre!

Puede ser que le interese esto: http://code.google.com/p/upload-at-click /

Al hacer clic en el elemento se abrirá el diálogo 'Abrir archivo' y

Ejecute la función personalizada.

AFAIK todavía necesita un elemento <input type="file">, entonces puede usar algunas de las cosas de quirksmode para darle estilo

El único sin <input type="file"> es incrustando una película flash transparente sobre el div. A continuación, puede utilizar un evento de clic generado por el usuario (compatible con las nuevas reglas de seguridad de Flash 10) para activar una llamada a la referencia de archivo de flash.examinar.

Ofrece una dependencia adicional sobre la forma quirksmode pero a cambio obtienes muchos más eventos (como eventos en progreso).

La forma más sencilla:

#fileInput {
  display: none;
}

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

Lo que es importante, usando display: none asegura que ningún lugar será ocupado por la entrada de archivos ocultos (lo que sucede usando opacity: 0).