javascript - mvc - simple jquery file upload
jQuery: simular un clic en un<input type="file"/> no funciona en Firefox? (2)
¿Hay alguna manera de hacer que esto funcione en FF?
No, y tampoco funciona en las versiones más comunes de IE. IE abrirá el diálogo, pero una vez que hayas seleccionado un archivo con él, el formulario no se enviará.
Perder la esperanza. La única forma de falsificar un cuadro de carga de archivos es usar la técnica de transparencia, y eso no se recomienda en absoluto ya que los navegadores pueden diseñar cajas de carga de archivos de forma diferente internamente (o incluso proporcionar un control de carga de archivos que no incluye un diálogo de navegación). por lo que es muy probable que termine con una forma inoperable.
Aprende a amar el campo de carga de archivos grises o utiliza la mejora progresiva para reemplazarlo con Flash cuando esté disponible.
Posible duplicado:
En JavaScript, ¿puedo hacer que un evento de "clic" se active programáticamente para un elemento de entrada de archivo?
Tengo una página web que se parece a esto
<html>
<head>
<title>File Upload Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div onclick="$(''input[type=file]'').click()" >CLICK SIMULATOR</div>
<input type="file"></input>
</body>
</html>
Mi objetivo es hacer que el div genere un evento de clic en la entrada del archivo , y parece funcionar exactamente como lo esperaría en IE y Chrome, pero no funciona en Firefox (no se abre ningún explorador de archivos cuando se hace clic en div ).
¿Hay alguna manera de hacer que esto funcione en FF?
Aquí está la solución alternativa (FF). El bit HTML:
<label>Upload Business Logo</label>
<input type="file" name="logo" id="logo" class="file-upload" />
<input type="text" id="text-logo" class="text-upload" readonly/>
<input type="button" id="btn-logo" class="btn-upload" alt="" />
CSS para el tipo de archivo de entrada:
.file-upload { display:none; }
El bit jQuery:
//bind click
$(''#btn-logo'').click(function(event) {
$(''#logo'').click();
});
//capture selected filename
$(''#logo'').change(function(click) {
$(''#text-logo'').val(this.value);
});
Al enviar el formulario, el archivo de entrada oculto cargará el archivo. Espero que esto ayude :)