javascript - precarga - ¿Abrir el diálogo de entrada de archivo y subir el cambio posible en IE?

subir archivos con ajax y mostrar precarga

Question

Esto es básicamente y simplificado lo que tengo ahora:

<style>
form.noshow { height: 0; overflow: hidden; }
</style>

<form class=noshow target="SomeIframeThatExists">
  <input type=file id=uf>
</form>

<a id=uflink href="/user/photo">Upload photo</a>

<script>
$(''uf'').addEvent(''change'', function(e) {
  // alert(''oele''); // this would work fine
  this.form.submit(); // auch in IE > "Access denied" exception
});
$(''uflink'').addEvent(''click'', function(e) {
  $(''uf'').click(); // opens file dialog in all browsers inc IE
  return false;
});
</script>

Qué hace (perfectamente) en Chrome 11 y FF 4:

1. La forma está oculta.
2. Haga clic en el enlace
3. El cuadro de diálogo Seleccionar archivo se abre
4. Selecciona un archivo
5. El diálogo cierra
6. El formulario es enviado
7. Se ejecuta el script en el iframe y se reemplaza la foto

Muy alta tecnología y dulce.

En IE, todo eso funciona, excepto [6]. El formulario no está enviado. Error de Javascript: "Acceso denegado". No importa cómo el formulario es invisible, siempre y cuando el diálogo se haya abierto con input.click() el formulario no se puede enviar al cambiar. (La función onchange se ejecuta form.submit() . El error solo ocurre cuando se form.submit() ).

Ahora todo esto puedo aceptar. IE apesta. Yo vivo con eso

Mi solución hasta ahora fue comprobar el navigator para "MSIE" y luego al hacer clic en el enlace en lugar de abrir el cuadro de diálogo, mostrando el formulario (con la entrada de archivo). Luego, el usuario tiene que hacer clic en la entrada real y fea del archivo y todo funciona bien. Pero feo.

La pregunta es doble:

1. ¿Hay alguna manera de hacer esto en IE tan genial como en Chrome? SIN desagradable flash / java mierda. Solo elementos html y javascript.
2. De lo contrario, ¿hay alguna manera de verificar el soporte de form.submit () después de abrir el diálogo desde un enlace (además de !navigator.contains("MSIE") )?

[2] podría estar capturando la excepción "Acceso denegado" lanzada en IE, pero luego es demasiado tarde: el usuario ya ha abierto el cuadro de diálogo y ha navegado hacia la foto. No querrás que vuelva a hacer eso. (Incluso los usuarios de IE no se lo merecen).

PD. Solo estoy interesado en Chrome 10+, Firefox 3.6+ e IE8 +.

PD. Puede ser importante: el elemento de entrada de archivo no puede estar cerca del enlace, porque el enlace está dentro de un formulario y ese formulario está (debe estar) separado del formulario de carga de archivos.

ACTUALIZAR
Segundo mejor: detectar soporte para este comportamiento de alta tecnología que solo no funciona en IE. No quiero usar navigator.appName.contains(''MSIE'') porque no es flexible y no necesariamente cierto.

Answer 1

enctype="multipart/form-data" , IE8 bloquea el envío solo si hay enctype="multipart/form-data" en el formulario.

Una solución que funcionó para mí localmente es agregar un botón de envío "real", por ejemplo

<input type="submit" id="btnSubmit" value="Submit" />

Luego tenga dicho código para enviar:

$(''btnSubmit'').click();

Si esto funciona, probablemente pueda ocultar el botón con CSS para que sea transparente para el usuario.

Answer 2

Intente agregar la etiqueta enctype="multipart/form-data" a su elemento de form .

Answer 3

Bueno, este es el mismo problema EXACTO que estoy teniendo ahora. Y el único truco (repugnante) que resolvió es hacer que la entrada [type = file] sea bastante grande con CSS, hacer que alpha = 0 y ponerlo encima del elemento UI previsto.

En resumen, hará que el usuario haga clic en el feo botón "explorar" sin que se dé cuenta.

Answer 4

¡¡Lo hice!!

http://jsfiddle.net/rudiedirkx/8hzjP/show/

<label for="picture">Upload picture</label>
<input type="file" id="picture" style="position: absolute; visibility: hidden" />

IE8 funciona. No me importan los demás.

Tan fácil =)

Answer 5

@Rudie, aquí - ¡Gracias por ese código! Funciona muy bien en IE y Chrome, pero no en FireFox.

Logré tomar mi código anterior (que funciona en FF y Chrome) y combiné tu código para MSIE.

Compruébalo aquí:

ARREGLO PARA IE, CROMO Y FIREFOX

https://gist.github.com/4337047

PROBLEMA: cuando se abre una entrada de archivo a través de un evento de scripts forzados (), IE no le permitirá enviar el formulario. Si hace clic en la entrada de archivo con su propio mouse (lo que no queremos), IE le permitirá enviar el formulario.

Tenga en cuenta que IE11, a partir de ahora, permite que el formulario se envíe si un campo de entrada de archivo ha cambiado a través de un evento ''clic'' con guiones.

Solución (en parte gracias a Rudie @ , https://.com/users/247372/rudie , http://hotblocks.nl/ ):

Haga una etiqueta para la entrada en IE. Si hace clic en él, forzará un clic en el campo de entrada, e IE lo aceptará (el IE idiota cree que el usuario hizo clic en el campo de entrada, hah)

Entonces, en esa etiqueta pondremos nuestra propia DIV con estilo.

El siguiente problema fue que esto no funciona en FF. Así que hicimos una comprobación simple (posiblemente desagradable) del navegador y, en base al navegador, mostraremos un botón diferente.

La solución está aquí. Probado en:

• Win 7 x64
• FireFox 13.01
• Chrome 23.0.1271.97 m
• IE9 en modo IE9 regular

¡Más pruebas / adiciones al código son MÁS que bienvenidas!

EDITAR:

Para citar a Roy McKenzie

IE11 ahora permite que el formulario se envíe si un campo de entrada de archivo ha cambiado a través de un evento ''clic'' con guiones.