Cuadro de diálogo Abrir archivo en JavaScript

Necesito una solución para mostrar el diálogo de archivo abierto en HTML mientras hago clic en un archivo div. El cuadro de diálogo para abrir archivo debe abrirse cuando divse hace clic en.

No quiero mostrar el cuadro del archivo de entrada como parte de una página HTML. Debe mostrarse en un cuadro de diálogo separado, que no forma parte de la página web.

Aqui hay uno lindo

Demostración de Fine Uploader

Es un <input type='file' />control en sí mismo. Pero se coloca un div sobre eso y se aplican estilos CSS para obtener esa sensación. La opacidad del control de archivo se establece en 0 para que parezca que la ventana de diálogo se abre al hacer clic en el 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 IE agregue esto:

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

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

EDITAR: En Safari, inputse desactiva 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 prefiere, puede seguir el "camino correcto" utilizando foren el que labelapunta a idla entrada de esta manera:

<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, <input>estilo, 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>

Demostración en jsFiddle . Probado en Chrome 30.0 y Firefox 24.0. Sin embargo, no funcionó en Opera 12.16.

Esto es lo que mejor funcionó 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 encima del elemento en el que se va a hacer clic, por lo que cualquier clic aterrizaría en él o en su etiqueta (que abre el cuadro de diálogo de carga como si hiciera clic en la etiqueta). 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: hiddenla entrada y display: inline-blockla etiqueta eran necesarias.

¿Qué pasa si JavaScript está desactivado en la máquina del cliente? Utilice la siguiente solución para todos los escenarios. Ni siquiera necesitas 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". Activa el evento de clic de forma predeterminada por HTML. Entonces, de forma predeterminada, activa el evento de clic, sin necesidad de jQuery / javascript. Si simplemente se hace con HTML, ¿por qué usar jQuery / jScript? Y no se puede saber si el cliente desactivó JS. Su característica debería funcionar aunque JS esté desactivado.

Trabajando jsFiddle (no necesitas JS, jquery)

Primero agregue las etiquetas de la cabeza :

<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 tienes etiquetas de script , simplemente agregue estas funciones arriba.

En sus etiquetas de cuerpo o formulario agregando:

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

No importa en qué lugar de su html, es como si hubiera creado una nueva instancia del tipo OpenFileDialog class como variable global , cuyo nombre es el id del elemento, sin importar en qué lugar de su código o xaml, pero en su script o código no puedes 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 la identificación del tipo de entrada oculta = "archivo", que es el nombre de la instancia de OpenFileDialog como cadena.

Para facilitar su vida al crear instancias de diálogos de archivos abiertos 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 diálogo de archivo abierto, puede crear y usar 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 de archivo abierto, asegúrese de que exista creando y usando 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 diálogos de archivos abiertos en el cuerpo o las etiquetas de formulario en el html, porque esto está agregando el tipo de entrada oculto = "file" s, entonces puede hacerlo en el script usando la función de creación 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 sus etiquetas de cuerpo o formulario, haya agregado:

onload="yourBodyOrFormId_onload()"

No tiene que hacer esta línea de arriba, si ya lo hizo.

SUGERENCIA: puede agregar a su proyecto o sitio web un nuevo archivo JScript, si aún no lo ha hecho, y en este archivo puede colocar todas las funciones de diálogo de archivo abierto fuera de las etiquetas de script y la página de formulario web o html, y usar en su página de formulario html o web desde este archivo JScript, pero no olvide antes vincular la página de formulario html o web al archivo JScript, por supuesto. Puede hacerlo simplemente arrastrando el archivo JScript a su página html en el encabezadoetiquetas. Si su página es un formulario web y no un simple html, y no tiene etiquetas de encabezado, colóquela en cualquier lugar para que funcione. No olvide definir la variable global en ese archivo JScript, cuyo valor será su cuerpo o id de formulario como cadena. Después de vincular el archivo JScript a su html o página de formulario web, puede cargar el evento de su cuerpo de formulario, establecer el valor de esa variable en su cuerpo o id de formulario. Luego, en el archivo JScript, ya no tienes que darle al documento la identificación del cuerpo o la forma de una página, solo dale el valor de esa variable. Puede llamar a esa variable bodyId o formId o bodyOrFormId o cualquier otro nombre que desee.

¡Buena suerte!

La forma más sencilla:

#file-input {
  display: none;
}

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

Lo que es importante, el uso de display: noneasegura que ningún lugar será ocupado por la entrada del archivo oculto (lo que sucede al usar opacity: 0).

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

Lo único que no <input type="file">ocurre es incrustar una película flash transparente sobre el div. A continuación, puede utilizar un evento de clic generado por el usuario (que cumpla con las nuevas reglas de seguridad de Flash 10) para activar una llamada a FileReference.browse de flash .

Ofrece una dependencia adicional sobre el modo quirksmode, pero a cambio obtienes muchos más eventos (como eventos de progreso integrados).

Puede usar

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