Unable to access file field in materializecss framework
<p>I just started playing around with materializecss framework. After going through the form page. I decided to try a simple example shown below:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1,     maximum-scale=1.0, user-scalable=no"/&gt;
  &lt;link rel="shortcut icon" href="images/icon.png" type="image/png"&gt;
  &lt;title&gt;form example&lt;/title&gt;

  &lt;!-- CSS  --&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"     rel="stylesheet"&gt;
  &lt;link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/&gt;
  &lt;link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="navbar-fixed"&gt;
  &lt;nav class="blue darken-4" role="navigation"&gt;
    &lt;ul id="slide-out" class="side-nav"&gt;
    &lt;li&gt;&lt;div class="userView"&gt;
            &lt;div class="background blue darken-3"&gt;
                &lt;!--&lt;img src="images/background3.jpg"&gt;--&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    &lt;a href="#" data-activates="slide-out" class="button-collapse show-on-large"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
    &lt;div class="nav-wrapper"&gt;
    &lt;a id="logo-container" href="index.php" class="brand-logo"&gt;&lt;img src="images/icon.png"&gt;Form&lt;/a&gt;
    &lt;ul class="right hide-on-med-and-down"&gt;
    &lt;li&gt;&lt;div class="right"&gt;&lt;a class="waves-effect waves-light btn  red modal-trigger tooltipped" data-position="bottom" data-delay="50" data-tooltip="Click to login or register " href="login.php" &gt;Login&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;   
&lt;/ul&gt;

&lt;/div&gt;
  &lt;/nav&gt;
&lt;/div&gt;

&lt;form id="uploadimage" class="col s12" method="post" action="" enctype="multipart/form-data"  &gt;
        &lt;div class="form-container"&gt;
            &lt;div class="row"&gt;
                &lt;div class="file-field input-field col s12"&gt;
                    &lt;div class="btn waves-effect waves-light blue darken-3"&gt;
                        &lt;span&gt;browse&lt;/span&gt;
                        &lt;input type="file" id="image" name="image"  accept="image/x-png,image/jpeg, image/jpg"&gt;
                    &lt;/div&gt;
                    &lt;div class="file-path-wrapper"&gt;
                        &lt;input id="imagef1" name="imagef1" class="file-path validate" placeholder="Image 1: Product Front View" type="text"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;center&gt;
                &lt;input type="button" id="postform" onclick="return check(this.form, this.form.image);" class="btn waves-effect waves-light red" value="Post Product" name="postform" /&gt;
            &lt;/center&gt;
        &lt;/div&gt;
&lt;/form&gt;

&lt;div id="modal5" class="modal bottom-sheet"&gt;
        &lt;div class="modal-content"&gt;
            &lt;p align="center"&gt;You must provide all the requested details. Please try again&lt;/p&gt;
            &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
$(document).ready(function() {

  $("#image").change(function(){
      alert("file upload changed");
  });

});

function check(form, image) {
     //Check each field has a value
    if (image.value == '' ) {
        $('#modal5').openModal();
        //alert('You must provide all the requested details. Please try     again');
        return false;
    }
}

&lt;/script&gt;
&lt;script src="js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
&lt;script src="js/materialize.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>After clicking on the browse button, the jquery code on change does not execute. What am i doing wrong here?</p>