Necesito validar que mi input de tipo file contenga un archivo, preferentemente que sea jpg o png.
Esto es lo que he podido hacer hasta ahora, no tengo idea de como trabajar con el input file:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="author" content="Diesan Romero">
<meta name="description" content="Sube tus imagenes de manera temporal">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="src/styles.css">
<title>Imágenes Momentaneas</title>
</head>
<body onload="timer()" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onkeydown="return false">
<div class="container-fluid">
<div class="row justify-content-center mt-5">
<h1><span>Imágenes Momentáneas</span></h1>
</div>
<div class="row justify-content-center mt-4">
<form action="data.php" method="post" enctype="multipart/form-data">
<div class="form">
<h3 class="row justify-content-center mt-5">Seleccione el tiempo en minutos que estará su imagen en línea</h3>
<div class="row justify-content-center mt-1">
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning">1</button>
<button type="button" class="btn btn-warning">5</button>
<button type="button" class="btn btn-warning">15</button>
<button type="button" class="btn btn-warning">30</button>
<button type="button" class="btn btn-warning">60</button>
</div>
</div>
<div class="row justify-content-center mt-5">
<input type="file" name="imagen" id="imagen" class="input-file">
<label for="imagen" class="btn btn-lg btn-outline-red js-labelFile">
<i class="icon fa fa-check"></i>
<span class="js-fileName">Elija la imagen a subir</span>
</label>
<input type="submit" class="btn btn-lg btn-red" value="Subir Imagen">
</div>
</div>
</form>
</div>
<div class="row justify-content-center mt-2">
<div class="col-4">
<div class="alert alert-success invisible" role="alert">
La imagen ha sido cargada correctamente, ahora debe subirla.
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script type="text/javascript" src="src/main.js"></script>
</body>
</html>
No se mucho php, ando aprendiendo y se me acaba de dificultar este tema.