Html 无法访问materializecss框架中的文件字段
我刚开始玩弄物化ECSS框架。在浏览表单页面之后。我决定尝试一个简单的例子，如下所示：Html 无法访问materializecss框架中的文件字段,html,css,materialize,Html,Css,Materialize,我刚开始玩弄物化ECSS框架。在浏览表单页面之后。我决定尝试一个简单的例子，如下所示： <!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
<!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>
范例
-
浏览
您必须提供所有要求的详细信息。请再试一次
$（文档）.ready（函数（）{
$（“#图像”）.change（函数（）{
警报（“文件上传已更改”）；
});
});
功能检查（表格、图像）{
//检查每个字段是否有一个值
如果（image.value==''）{
$（'#modal5'）.openModal（）；
//警报（“您必须提供所有请求的详细信息。请重试”）；
返回false；
}
}
单击browse按钮后，不会执行更改时的jquery代码。我做错了什么？我通过MaterializeCSGithub页面上@wackychocolatefactory的帮助解决了这个问题。答案取决于我的JavaScript文件的顺序。将jquery和Materialiecss的脚本移动到$（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>
$（文档）.ready（函数（）{
$（“#图像”）.change（函数（）{
警报（“文件上传已更改”）；
});
});
功能检查（表格、图像）{
//检查每个字段是否有一个值
如果（image.value==''）{
$（'#modal5'）.openModal（）；
//警报（“您必须提供所有请求的详细信息。请重试”）；
返回false；
}
}