example - En JavaScript, ¿puedo hacer que se active un evento de "clic" programáticamente para un elemento de entrada de archivo?
javascript html ejemplos (28)
Solucion de trabajo
Permítanme agregar a esta publicación anterior, una solución de trabajo que solía usar que funciona probablemente en el 80% o más de todos los navegadores nuevos y antiguos.
La solución es compleja pero simple. El primer paso es hacer uso de CSS y ocultar el tipo de archivo de entrada con "sub-elementos" que se muestran a través de una opacidad de 0. El siguiente paso es usar JavaScript para actualizar su etiqueta según sea necesario.
HTML Los ID se insertan simplemente si desea una manera rápida de acceder a un elemento específico, sin embargo, las clases son obligatorias, ya que se relacionan con el CSS que configura todo este proceso
<div class="file-input wrapper">
<input id="inpFile0" type="file" class="file-input control" />
<div class="file-input content">
<label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
<input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
</div>
</div>
CSS Tenga en cuenta que la coloración y los estilos de fuente son totalmente su preferencia. Si usa este CSS básico, siempre puede usar la marca de fin de semana para darle el estilo que desee, esto se muestra en el jsFiddle que se encuentra al final.
.file-test-area {
border: 1px solid;
margin: .5em;
padding: 1em;
}
.file-input {
cursor: pointer !important;
}
.file-input * {
cursor: pointer !important;
display: inline-block;
}
.file-input.wrapper {
display: inline-block;
font-size: 14px;
height: auto;
overflow: hidden;
position: relative;
width: auto;
}
.file-input.control {
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
height: 100%;
position: absolute;
text-align: right;
width: 100%;
z-index: 2;
}
.file-input.content {
position: relative;
top: 0px;
left: 0px;
z-index: 1;
}
.file-input.output {
background-color: #FFC;
font-size: .8em;
padding: .2em .2em .2em .4em;
text-align: center;
width: 10em;
}
.file-input.button {
border: none;
font-weight: bold;
margin-left: .25em;
padding: 0 .25em;
}
JavaScript Puro y verdadero, sin embargo, algunos navegadores ANTIGUOS (retirados) todavía pueden tener problemas (como Netscrape 2)
var inp = document.getElementsByTagName(''input'');
for (var i=0;i<inp.length;i++) {
if (inp[i].type != ''file'') continue;
inp[i].relatedElement = inp[i].parentNode.getElementsByTagName(''label'')[0];
inp[i].onchange /*= inp[i].onmouseout*/ = function () {
this.relatedElement.innerHTML = this.value;
};
};
Trabajando jsFiddle Ejemplo
Me gustaría hacer que un evento de clic se dispare en una etiqueta <input type="file"> programáticamente.
Simplemente llamar a click () no parece hacer nada o al menos no aparece un cuadro de diálogo de selección de archivos.
He estado experimentando con la captura de eventos utilizando escuchas y redireccionando el evento, pero no he podido lograr que eso realmente realice el evento como si alguien hubiera hecho clic en él.
Aquí está la solución de JavaScript puro para este problema. Funciona bien en todos los navegadores
<script>
function upload_image_init(){
var elem = document.getElementById(''file'');
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>
Aquí está la solución que funciona para mí: CSS:
#uploadtruefield {
left: 225px;
opacity: 0;
position: absolute;
right: 0;
top: 266px;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
width: 270px;
z-index: 2;
}
.uploadmask {
background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
width:132px;
}
HTML con "pequeño" ayuda de JQuery:
<div class="uploadmask">
<input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield" type="file" onchange="$(''#uploadmaskfield'').val(this.value)" >
Solo asegúrese de que maskfied esté cubierto de manera compacta por el campo de carga real.
Descubrí que si la entrada (archivo) está fuera del formulario, al disparar el evento de clic se invoca el diálogo de archivo.
ESTO ES POSIBLE: Bajo FF4 +, Opera?, Chrome: pero:
inputElement.click()debe llamarse desde el contexto de acción del usuario! (no contexto de ejecución de script)<input type="file" />debe estar visible (inputElement.style.display !== ''none'') (puede ocultarlo con visibilidad u otra cosa, pero no con la propiedad "display")
Esperemos que esto ayude a alguien. Pasé 2 horas golpeando mi cabeza contra él:
En IE8 o IE9, si activas la apertura de una entrada de archivo con javascript de alguna forma (créeme, las he probado todas), no te permitirá enviar el formulario con javascript, simplemente fallará silenciosamente.
El envío del formulario a través de un botón de envío normal puede funcionar, pero llamar a form.submit (); fallará silenciosamente
Tuve que recurrir a la superposición de mi botón de selección de archivo con una entrada de archivo transparente que funciona.
Este código funciona para mí. ¿Es esto lo que estas tratando de hacer?
<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button id="addfiles" >Add files</button>
<script language="javascript" type="text/javascript">
$("#addfiles").click(function(){
$("#fileinput").click();
});
</script>
Esto ahora será posible en Firefox 4, con la advertencia de que cuenta como una ventana emergente y, por lo tanto, se bloqueará cada vez que una ventana emergente lo haya sido.
Esto funcionó para mí:
<script>
function sel_file() {
$("input[name=userfile]").trigger(''click'');
}
</script>
<input type="file" name="userfile" id="userfile" />
<a href="javascript:sel_file();">Click</a>
Hace un tiempo que estaba investigando esto porque quería crear un botón personalizado que abriera el cuadro de diálogo del archivo y comenzara la carga de inmediato. Acabo de notar algo que podría hacer esto posible: parece que Firefox abre el cuadro de diálogo cuando haces clic en cualquier lugar de la carga. Así que lo siguiente podría hacerlo:
- Cree una carga de archivo y un elemento separado que contenga una imagen que desee utilizar como botón
- Organícelas para que se superpongan y haga que el elemento del archivo sea backgroud y el borde transparente para que el botón sea lo único visible
- Agregue el javascript para hacer que IE abra el diálogo cuando se hace clic en la entrada del botón / archivo
- Utilice un evento onchange para enviar el formulario cuando se selecciona un archivo
Esto es solo teórico ya que ya usé otro método para resolver el problema, pero podría funcionar.
Hay formas de redirigir los eventos al control, pero no espere poder disparar fácilmente los eventos al control de incendios, ya que los navegadores intentarán bloquearlo por (buenas) razones de seguridad.
Si solo necesita que aparezca el cuadro de diálogo de archivo cuando un usuario haga clic en algo, digamos que, como quiere que los botones de carga de archivos se vean mejor, es posible que desee echar un vistazo a lo que se le ocurrió a Shaun Inman .
He podido activar el teclado con un cambio creativo de enfoque dentro y fuera del control entre los eventos de pulsación de teclas, pulsación de teclas y pulsación de teclas. YMMV.
Mi consejo sincero es dejar esto solo, porque este es un mundo de dolor de incompatibilidad con el navegador. Las actualizaciones menores del navegador también pueden bloquear trucos sin previo aviso y es posible que tenga que reinventar los hacks para que funcione.
He estado buscando una solución para todo este día. Y estas son las conclusiones que he hecho:
- Por razones de seguridad, Opera y Firefox no permiten activar la entrada de archivos.
- La única alternativa conveniente es crear una entrada de archivo "oculta" (usando opacidad, no "oculta" o "mostrar: ninguna"!) Y luego crear el botón "debajo". De esta forma, se ve el botón, pero al hacer clic en el usuario, se activa la entrada del archivo.
¡Espero que esto ayude! :)
<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0); position: relative; top: -40px;; left: -20px" />
</div>
JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/
popFileSelector = function() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
};
window.popRightAway = function() {
document.getElementById(''log'').innerHTML += ''I am right away!<br />'';
popFileSelector();
};
window.popWithDelay = function() {
document.getElementById(''log'').innerHTML += ''I am gonna delay!<br />'';
window.setTimeout(function() {
document.getElementById(''log'').innerHTML += ''I was delayed!<br />'';
popFileSelector();
}, 1000);
};
<body>
<form>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
</form>
<a onclick="popRightAway()" href="#">Pop Now</a>
<br />
<a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
<div id="log">Log: <br /></div>
</body>
Mi solución para Safari con jQuery y jQuery-ui:
$("<input type=''file'' class=''ui-helper-hidden-accessible'' />").appendTo("body").focus().trigger(''click'');
No se puede hacer eso en todos los navegadores, supuestamente IE lo permite, pero Mozilla y Opera no lo hacen.
Cuando redacta un mensaje en Gmail, la función ''adjuntar archivos'' se implementa de una manera para IE y cualquier navegador que lo admita, y luego se implementa de otra manera para Firefox y aquellos navegadores que no lo hacen.
No sé por qué no puede hacerlo, pero una cosa que es un riesgo de seguridad, y que no tiene permitido hacer en ningún navegador, es establecer el nombre del archivo en el elemento del archivo HTML mediante programación.
Oye, esta solución funciona. para descargar deberíamos estar utilizando MSBLOB
$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
var fileName = invoiceNumberEntity + ".pdf";
var pdfDownload = document.createElement("a");
document.body.appendChild(pdfDownload);
AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
var fileBlob = new Blob([returnedJSON.data], {type: ''application/pdf''});
if (navigator.appVersion.toString().indexOf(''.NET'') > 0) { // for IE browser
window.navigator.msSaveBlob(fileBlob, fileName);
} else { // for other browsers
var fileURL = window.URL.createObjectURL(fileBlob);
pdfDownload.href = fileURL;
pdfDownload.download = fileName;
pdfDownload.click();
}
});
};
Para AngularJS o incluso para javascript normal.
Para aquellos que entienden que tienes que superponer una forma invisible sobre el enlace, pero son demasiado perezosos para escribir, lo escribí para ti. Bueno, para mí, pero bien podría compartir. Los comentarios son bienvenidos.
HTML (En algún lugar):
<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>
HTML (En algún lugar que no te importe):
<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
</form>
</div>
JavaScript:
function pageY(el) {
var ot = 0;
while (el && el.offsetParent != el) {
ot += el.offsetTop ? el.offsetTop : 0;
el = el.offsetParent;
}
return ot;
}
function pageX(el) {
var ol = 0;
while (el && el.offsetParent != el) {
ol += el.offsetLeft ? el.offsetLeft : 0;
el = el.offsetParent;
}
return ol;
}
function fileMove() {
if (navigator.appName == "Microsoft Internet Explorer") {
return; // Don''t need to do this in IE.
}
var link = document.getElementById("fileLink");
var form = document.getElementById("uploadForm");
var x = pageX(link);
var y = pageY(link);
form.style.position = ''absolute'';
form.style.left = x + ''px'';
form.style.top = y + ''px'';
}
function fileBrowse() {
// This works in IE only. Doesn''t do jack in FF. :(
var browseField = document.getElementById("uploadForm").file;
browseField.click();
}
Pruebe esta solución: http://code.google.com/p/upload-at-click/
Puede hacer clic en () en cualquier navegador, pero algunos navegadores necesitan que el elemento esté visible y centrado. Aquí hay un ejemplo de jQuery:
$(''#input_element'').show();
$(''#input_element'').focus();
$(''#input_element'').click();
$(''#input_element'').hide();
Funciona con la ocultación antes de click() pero no sé si funciona sin llamar al método show. Nunca probé esto en Opera, lo probé en IE / FF / Safari / Chrome y funciona. Espero que esto sea de ayuda.
Puede hacerlo según la respuesta del cuadro de diálogo Abrir archivo en la etiqueta <a>
<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple />
<a href="" onclick="document.getElementById(''upload'').click(); return false">Upload</a>
Puedes usar
<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$(''#file'').click(function() {
$(''#file_input'').focus().trigger(''click'');
});
</script>
Sé que esto es antiguo, y todas estas soluciones son hacks alrededor de las precauciones de seguridad del navegador con un valor real.
Dicho esto, a partir de hoy, fileInput.click () funciona en Chrome actual (36.0.1985.125 m) y Firefox ESR actual (24.7.0), pero no en IE actual (11.0.9600.17207). La superposición de un campo de archivo con opacidad 0 sobre un botón funciona, pero quería un elemento de enlace como el activador visible, y el subrayado de desplazamiento no funciona del todo en ningún navegador. Se enciende y luego desaparece, probablemente el navegador analice si el estilo de desplazamiento se aplica o no.
Pero sí encontré una solución que funciona en todos esos navegadores. No pretendo haber probado todas las versiones de todos los navegadores, o que sé que seguirá funcionando para siempre, pero parece que ahora satisface mis necesidades.
Es simple: coloque el campo de entrada del archivo fuera de la pantalla (posición: absoluto; arriba: -5000px), coloque un elemento de etiqueta a su alrededor y active el clic en la etiqueta, en lugar del campo del archivo.
Tenga en cuenta que el enlace no debe tener un guión para llamar al método de clic de la etiqueta, no lo hace automáticamente, como cuando hace clic en el texto dentro de un elemento de etiqueta. Al parecer, el elemento de enlace captura el clic y no llega a la etiqueta.
Tenga en cuenta también que esto no proporciona una manera de mostrar el archivo seleccionado actualmente, ya que el campo está fuera de la pantalla. Quería enviar inmediatamente cuando se seleccionó un archivo, por lo que no es un problema para mí, pero necesitará un enfoque algo diferente si su situación es diferente.
Si desea que el método de click funcione en Chrome, Firefox, etc., aplique el siguiente estilo a su archivo de entrada. Estará perfectamente oculto, es como hacer una display: none;
#fileInput {
visibility: hidden;
position: absolute;
top: 0;
left: -5000px;
}
Es así de simple, lo probé funciona!
Tenía una etiqueta <input type="button"> oculta de la vista. Lo que hice fue adjuntar el evento "onClick" a cualquier componente visible de cualquier tipo, como una etiqueta. Esto se hizo usando las Herramientas de desarrollo de Google Chrome o Firebug de Mozilla Firefox usando el comando "editar HTML" del botón derecho. En este evento especifique el siguiente script o algo similar:
Si tienes JQuery:
$(''#id_of_component'').click();
si no:
document.getElementById(''id_of_component'').click();
Gracias.
no es imposible:
var evObj = document.createEvent(''MouseEvents'');
evObj.initMouseEvent(''click'', true, true, window);
setTimeout(function(){ document.getElementById(''input_field_id'').dispatchEvent(evObj); },100);
Pero de alguna manera solo funciona si está en una función a la que se llamó mediante un evento de clic.
Por lo que podría tener la siguiente configuración:
html:
<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">
JavaScript:
function openFileChooser() {
var evObj = document.createEvent(''MouseEvents'');
evObj.initMouseEvent(''click'', true, true, window);
setTimeout(function()
{
document.getElementById(''input_img'').dispatchEvent(evObj);
},100);
}
simplemente use una etiqueta de etiqueta, de esa manera puede ocultar la entrada y hacer que funcione a través de su etiqueta relacionada https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label
Funciona :
Por razones de seguridad en Firefox y Opera, no puedes disparar el clic en la entrada del archivo, pero puedes simular con MouseEvents:
<script>
click=function(element){
if(element!=null){
try {element.click();}
catch(e) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
element.dispatchEvent(evt);
}
}
};
</script>
<input type="button" value="upload" onclick="click(document.getElementById(''inputFile''));"><input type="file" id="inputFile" style="display:none">
$(document).one(''mousemove'', function() { $(element).trigger(''click'') } );
Me funcionó cuando tuve un problema similar, es un eRube Goldberg habitual.