Home / Questions / 6459
Accepted
vdjkelly
Asked: 2020-03-29 16:14:53 +0800 CST 2020-03-29 16:14:53 +0800 CST

Problems with google material design button

  • 772

I have a buttonto upload images in my web project; in Chrome and Microsoft Edge it works, but in Firefox it doesn't. Clicking it should open the window to search for the image to upload as it does in other browsers.

My HTML code:

<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>

That code should work the same as it does in Chrome and Explorer:

enter image description here

javascript

1 Answers

  1. Best Answer

    This is a problem that occurs because the HTML code is invalid. In the HTML definition it is indicated that the content inside a button can be:

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

    That is, phrase-type content, but not interactive. And within interactive content includes (but is not limited to): a, button, selector inputother than hidden(emphasis added by me):

    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)

    In your code you include a formand a inputof type fileinside a buttonwhich makes the code invalid, so each browser will interpret it however it can. Chrome and IE interpret it in a way you like and Firefox in a way you don't... but it could be another way.

    One way to fix the problem is to make the code valid:

    • moving the form out,
    • adding a idto the file input, and
    • changing the buttonto a labelthat points to the input(with a for).

    So the code will be valid and works in all browsers:

    <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>

    • 6