entrada del archivo desencadenante jQuery
Estoy intentando activar un cuadro de carga (botón de exploración) usando jQuery.
El método que he probado ahora es:
$('#fileinput').trigger('click');
Pero no parece funcionar. Por favor ayuda. Gracias.
Esto se debe a una restricción de seguridad.
Descubrí que la restricción de seguridad es solo cuando está <input type="file"/>configurado en display:none;o es visbilty:hidden.
Así que intenté colocarlo fuera de la ventana gráfica configurando position:absolutey top:-100px;voilà, funciona.
ver http://jsfiddle.net/DSARd/1/
llámalo truco.
Espero que eso te funcione.
esto funcionó para mí:
JS:
$('#fileinput').trigger('click');
HTML:
<div class="hiddenfile">
<input name="upload" type="file" id="fileinput"/>
</div>
CSS:
.hiddenfile {
width: 0px;
height: 0px;
overflow: hidden;
}
>>>Otro que funciona en varios navegadores:<<<
La idea es que superpongas un enorme botón invisible de "Examinar" sobre tu botón personalizado. Entonces, cuando el usuario hace clic en su botón personalizado, en realidad está haciendo clic en el botón "Examinar" del campo de entrada nativo.
JS Violín: http://jsfiddle.net/5Rh7b/
HTML:
<div id="mybutton">
<input type="file" id="myfile" name="upload"/>
Click Me!
</div>
CSS:
div#mybutton {
/* IMPORTANT STUFF */
overflow: hidden;
position: relative;
/* SOME STYLING */
width: 50px;
height: 28px;
border: 1px solid green;
font-weight: bold
background: red;
}
div#mybutton:hover {
background: green;
}
input#myfile {
height: 30px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
font-size: 100px;
z-index: 2;
opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}
JavaScript:
$(document).ready(function() {
$('#myfile').change(function(evt) {
alert($(this).val());
});
});
Puede utilizar el elemento LABEL ej.
<div>
<label for="browse">Click Me</label>
<input type="file" id="browse" name="browse" style="display: none">//
</div>Esto activará el archivo de entrada.