4

Tengo un button para subir imágenes en mi proyecto web; en Chrome y Microsoft Edge funciona, pero en Firefox no. Al dar clic debería de abrir la ventana para buscar la imagen a subir como lo hace en los otros navegadores.

Mi código HTML:

<button data-upgraded=",MaterialButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored f-left">
<i class="material-icons ">cloud_upload</i>
    <form method="POST" action="http://timeline.dev/post/ajaxupload" accept-charset="UTF-8" class="x-uploader" enctype="multipart/form-data">
      <input name="_token" value="3kpNrTDVx59bdv1KqB8x4HNbftxdDC1TpIjpNgeX" type="hidden">
      <input name="file" type="file">
    </form>
</button>

Ese código debería de funcionar igual como lo hace en Chrome y Explorer:

introducir la descripción de la imagen aquí

0

1 respuesta 1

6

Esto es un problema que ocurre porque el código HTML no es válido. En la definición de HTML se indica que el contenido dentro de un botón puede ser:

Phrasing content, but there must be no interactive content descendant.

Es decir, contenido de tipo frase, pero que no sea interactivo. Y dentro de contenido interactivo se incluyen (entre otros): a, button, select o input que no sea hidden (enfasis añadido por mí):

Interactive content is content that is specifically intended for user interaction.

  • a (if the href attribute is present), audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)

En tu código incluyes un form y un input de tipo file dentro de un button que hace que el código no sea válido, entonces cada navegador lo interpretará como pueda. Chrome e IE lo interpretan de una manera que a ti te gusta y Firefox de una que no te gusta... pero podría ser de otra manera.

Una manera de solucionar el problema es hacer que el código sea válido:

  • moviendo el formulario fuera,
  • añadiendo un id al input del fichero, y
  • cambiando el button por un label que apunte al input (con un for).

Entonces el código será válido y funciona en todos los navegadores:

<form method="POST" action="http://timeline.dev/post/ajaxupload" accept-charset="UTF-8" class="x-uploader" enctype="multipart/form-data">
  <label data-upgraded=",MaterialButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored f-left" for="file">
    <i class="material-icons ">cloud_upload</i>
    <input name="_token" value="3kpNrTDVx59bdv1KqB8x4HNbftxdDC1TpIjpNgeX" type="hidden">
    <input name="file" type="file" id="file">
  </label>
</form>

1
  • Gracias me funciono tal cual como queria.
    – vdjkelly
    Commented el 29 mar. 2016 a las 1:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.