Question

我刚刚开始使用materializecss框架。浏览表单页面后。我决定尝试下面显示的一个简单示例：

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

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"     rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="navbar-fixed">
  <nav class="blue darken-4" role="navigation">
    <ul id="slide-out" class="side-nav">
    <li><div class="userView">
            <div class="background blue darken-3">
                <!--<img src="images/background3.jpg">-->
            </div>
        </div>
    </li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
    <div class="nav-wrapper">
    <a id="logo-container" href="index.php" class="brand-logo"><img src="images/icon.png">Form</a>
    <ul class="right hide-on-med-and-down">
    <li><div class="right"><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" >Login</a></div></li>   
</ul>

</div>
  </nav>
</div>

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

            <center>
                <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" />
            </center>
        </div>
</form>

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

<script type="text/javascript">
$(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;
    }
}

</script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>

单击浏览按钮后，更改时的jquery代码不会执行。我在这做错了什么？

Answer 1

我能够通过materializecss github页面的@wackychocolatefactory帮助解决问题。答案在于我的JavaScript文件的顺序。这就是将jquery和materializecss的脚本移到$（document）.ready（function（）{}）之上;

所以我应该按照这个顺序加载

 <script src="js/jquery-3.1.1.min.js"></script>
 <script src="js/materialize.min.js"></script>
<script type="text/javascript">
$(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;
    }
}

</script>

无法访问materializecss框架中的文件字段

1 个答案: