PHP - ayuda con codigo php

<p class=" avatar text-warning">Avatar:<p>

<?php

$formatos_imagen = array('.png', '.gif');

$extension_archivo = substr($nombre_archivo, strrpos($nombre_archivo, '.'));

$directorio = 'img/icons/avatar/';

$dir = opendir("$directorio") ;

$imagen = $directorio . $file;

echo '<select class="seleccion_avatar" name="avatar_usuario" onChange="showimage()">';

   echo '<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';											while ($file = readdir($dir))

{

if ($file != "." && $file != "..")

{

echo '<option class="opcion" value=$file>$file</option>';

}

}

echo '<option class="opcion">Personalizar</option>';

echo" </select>";

?>

<img class="image_avatar" id="imagen" src="<?php echo $ruta.$file ?>" alt="" name="avatar_usuario" onload="recargar()"

width="108px" height="auto">

<?php

 closedir($dir);

?>

<?php //SQL insertar nuevo comentario a Tabla Comentarios

		//Comprobamos si esta definida nuestra variable de envio(submit)

		if(isset($_POST['insertar_comentario'])){

			//incluimos conexion

			require_once('includes/conexion_blog.inc.php');

			//Obtenemos datos Formulario(escapando string por seguridad)

			$usario = mysqli_real_escape_string($ConDB, $POST['usuario']);

			$avatar_usuario = mysqli_real_escape_string($ConDB, $POST['avatar_usuario']);

			$comentario = mysqli_real_escape_string($ConDB, $POST['comentario']);

			$fecha = mysqli_real_escape_string($ConDB,$POST['fecha']);

			// Comprobamos Campos obligatorios

			if($usuario && $avatar_usuario && $comentario && $fecha){

				//Si todo esta bien inyectamos datos a nuestra base de datos

$sql = "INSERT INTO comentarios VALUES('', '{$_GET['id']}', '$usuario', '$avatar_usuario', '$comentario', '$fecha')";

					mysqli_query($ConDB, $sql);

					//Redirigimos a nuestro comentario Publicado

					header('location: #comentario');

					//cerramos conexion

					mysqli_close($ConDB);

				}else{

					echo'<div class="holder-error">Debes rellenar todos los campos</div>';

				}

			}// Fin Isset

?>

<section class="formulario_comentarios">

        <!-- Formulario insertar  nuevo comentario  de usuario a la Tabla comentarios -->

            <form class="form-control_comentarios col-lg-12" method="POST" action="comentarios.php" name="formulario">

                <fieldset>

                    <legend class="comentar text-center text-danger">Comentar</legend>

                    <p class=" usuario text-warning">Usuario:</p> <input class="usuario_text input-lg" type="text" name="usuario" placeholder="Usuario*"/><br />

<p class=" avatar text-warning">Avatar:<p><?php

$formatos_imagen = array('.png', '.gif');

$extension_archivo = substr($nombre_archivo, strrpos($nombre_archivo, '.'));

$directorio = 'img/icons/avatar/';

$dir = opendir("$directorio") ;

$imagen = $directorio . $file;

echo '<select class="seleccion_avatar" name="avatar_usuario" onChange="showimage()">';

echo '<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

    while ($file = readdir($dir))

    {

   if ($file != "." && $file != "..")

    {

    echo '<option class="opcion" value=$file>$file</option>';

      }

      }

   echo '<option class="opcion">Personalizar</option>';

echo" </select>";

?>

<img class="image_avatar" id="imagen" src="<?php echo $ruta.$file ?>" alt="" name="avatar_usuario" onload="recargar()" width="108px" height="auto">

<?php

closedir($dir);

?>

<br/><br/>

 <p class="text-center comment text-warning">Comentario:</p><br />

<textarea class="comentario_text input-lg" name="comentario" placeholder="Inserte aqui su comentario*"></textarea>

<br />

<p class="date text-warning">Fecha:</p> <input class="fecha_text" type="text" name="fecha" value="<?php date_default_timezone_set("Europe/Madrid"); echo date("d-m-Y H:i:s");?>">

<br />

<br />

<input class="comentar" id="comentar" type="submit" name="insertar_comentario" value="Comentar!"/>

</fieldset>

</form>

<br />

<a class="regresar" href="blog.php" title="Regresar al Blog"><img src="img/icons/return2.png" alt=""width="32px" height="auto"></a><br />

</section>

<SCRIPT type="text/javascript">

function showimage() {

if (!document.images)

return

document.images.avatar.src=

'avatar/' + document.formulario.avatar.options[document.formulario.avatar.selectedIndex].value

}

</SCRIPT>

echo '<select class="seleccion_avatar" name="avatar_usuario" onChange="showimage(this.value)">';

<SCRIPT type="text/javascript">

function showimage( imagen ) {

if (!imagen) return  // Creo que esta linea sobraría

var imagen=document.getElementById("imagen");

imagen.src="avatar/"+ imagen;

}

</SCRIPT>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Documento sin título</title>

</head>

<SCRIPT type="text/javascript">

function showimage( img )

{

	if (!img) return  // Creo que esta linea sobraría	

	img="img/icons/avatar/"+ img;

	var imagen=document.getElementById("imagen");

	imagen.src=img;

	var selImagenes=document.getElementById("selImagenes");

	selImagenes.style.backgroundImage="url("+img+")";

}

</SCRIPT>

<style>

.seleccion_avatar{ padding-left:40px; background-repeat:no-repeat; background-size:38px; }

</style>

<body>

<?php

$directorio="img/icons/avatar/";

$dir = opendir("$directorio") ;

echo '<select id="selImagenes" class="seleccion_avatar" name="avatar_usuario" onChange="showimage(this.value)">';

	echo '<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

		while ($file = readdir($dir))

		{

			if ($file != "." && $file != "..")

			{	echo '<option class="opcion" value="'.$file.'">'.$file.'</option>'; }

		}

	echo '<option class="opcion">Personalizar</option>';

echo" </select>";

closedir($dir);

?>

<img class="image_avatar" id="imagen" src="<?php echo $directorio.$file ?>" alt="" name="avatar_usuario" onload="recargar()" width="108px" height="auto">

</body>

</html>

echo '<option class="opcion" value=$file>$file</option>';

echo '<option class="opcion" value="'.$file.'">'.$file.'</option>';

echo '<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

<form class="form-control_comentarios col-lg-12" method="POST" action="comentarios.php" name="formulario" enctype="multipart/form-data">

                <fieldset>

                    <legend class="comentar text-center text-danger">Comentar</legend>

                    <p class=" usuario text-warning">Usuario:</p> <input class="usuario_text input-lg" type="text" name="usuario" placeholder="Usuario*"/><br />

                    <p class=" avatar text-warning">Avatar:<p><?php

		$formatos_imagen = array('.png', '.gif');

		$extension_archivo = substr($nombre_archivo, strrpos($nombre_archivo, '.'));

		$directorio = 'img/icons/avatar/';

		$dir = opendir("$directorio") ;

		echo '<select id="selImagenes" class="seleccion_avatar" name="avatar_usuario" onChange="showimage(this.value)">';

		echo '<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

		//Incluimos conexion

		require_once('includes/conexion_blog.inc.php');

		//Consulta SQl

		$_sql = "SELECT * FROM comentarios WHERE usuario = avatar_usario";

		$resultado = mysqli_query($ConDB, $sql);

		//Comprobamos existencia

	  	if(mysqli_num_rows($resultado) = 1 ){

		//Salida de datos

		while($row = mysqli_fetch_assoc($resultado)){

		}

		else

		{

		while ($file = readdir($dir))

		{

		if ($file != "." && $file != "..")

		{

		echo '<option class="opcion" value="'.$file.'">'.$file.'</option>';

		}

	}

}

}

echo '<option class="opcion">Personalizar</option>';

?>

<img class="image_avatar" id="imagen" src="<?php echo $resultado || $directorio.$file ?>" alt="" name="avatar_usuario" onload="recargar()" width="108px" height="auto">

<?php

closedir($dir);

?>

function showimage( img )

{

if (!img) return  // Creo que esta linea sobraría	

img="img/icons/avatar/"+ img;

var imagen=document.getElementById("imagen");

imagen.src=img;

var selImagenes=document.getElementById("selImagenes");

selImagenes.style.backgroundImage="no-repeat url("+img+")";

var selImagenes=document.getElementById("personalizar");

selImagenes.style.backgroundImage="url("+img+")";

function showimage( img )

{

if (!img) return  // Creo que esta linea sobraría	

img="img/icons/avatar/"+ img;

var imagen=document.getElementById("imagen");

imagen.src=img;

var selImagenes=document.getElementById("selImagenes");

selImagenes.style.backgroundImage="no-repeat url("+img+")";

var option=document.createElement("option");

option.value='<input type="file">'

option.text="Personalizar";

s.appendChild(option)

}

function showimage( img )

{

if (!img) return  // Creo que esta linea sobraría	

img="img/icons/avatar/"+ img;

var imagen=document.getElementById("imagen");

imagen.src=img;

var selImagenes=document.getElementById("selImagenes");

selImagenes.style.backgroundImage="no-repeat url("+img+")";

var selImagenes=document.getElementById("personalizar");

selImagenes.style.backgroundImage="url("+img+")";

}

function elegir_opcion(option) {

$tipo = jQuery(option).val();

$campos = jQuery("#"+$tipo).html();

jQuery(".opcionesWrapper").html($campos);

}

si ( valor == personal)

{

   hazEsto

}

else

{

  hazEstoOtro

}

if(valor == personalizar){

echo'url de la imagen seleccionada desde el boton examinar'

}else{

echo'url imagen seleccionada'

}

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Documento sin título</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<SCRIPT type="text/javascript">

$(document).ready(function(e) {

	$('.opcion').click(function(e) {

		if( $(this).text() == "Personalizar" )

		{

			$('#imagen').hide();

			$("#avatarPersonal").show();

		}

		else

		{

			$("#avatarPersonal").hide();

			img="img/icons/avatar/"+ $(this).val();

			$("#imagen").attr("src",img);

			$("#selImagenes").css('background-image','url('+img+')');

			$('#imagen').show();

		}

	});

});

</SCRIPT>

<style>

#avatarPersonal { display:none }

.seleccion_avatar{ padding-left:40px; background-repeat:no-repeat; background-size:38px; }

button, .inputfile + label { border:black 1px solid; background-color:rgba(179,94,0,0.63); padding: 0px 10px }

.inputfile { display:none; color:white}

.inputfile:focus + label,

.inputfile + label:hover {

    background-color: rgba(179,94,0,0.63);

}

</style>

<body>

<?php

$directorio="img/icons/avatar/";

$dir = opendir("$directorio") ;

$cod='<select id="selImagenes" class="seleccion_avatar" name="avatar_usuario" onChange="showimage(this)">';

	$cod.='<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

		while ($file = readdir($dir))

		{

			if ($file != "." && $file != "..")

			{	$cod.='<option class="opcion" value="'.$file.'">'.$file.'</option>'; }

		}

	$cod.='<option class="opcion">Personalizar</option>';

$cod.='</select>';

closedir($dir);

?>

<div>

	<img class="image_avatar" id="imagen" src="<?php echo $directorio.$file ?>" alt="" name="avatar_usuario" onload="recargar()" width="108px" height="auto">

</div>

<?=$cod;?>

<form id="avatarPersonal">

	<input class="inputfile" type="file" name="imgRemota" id="imgRemota"/>

	<label for="imgRemota"><strong>Choose a file</strong></label>

	<button type="submit" value="Enviar">Enviar</button>

</form>

</body>

</html>

$(document).ready(function(e) { //la variable documento , lee la funcio n(e)

	$('.opcion').click(function(e) {// cuando hacemos click en una opcion la funcion(e) sxe ejecuta

		if( $(this).text() == "Personalizar" ) //si el texto del option es personalizar

		{

			$('#imagen').hide(); //la variable imagen llama a la funcion hide para ocultarla

			$("#avatarPersonal").show(); // enseña la variable avatarpersonal

		}

		else //sino

		{

			$("#avatarPersonal").hide(); //oculta el avatarpersonal

			img="img/icons/avatar/"+ $(this).val();// cojer el valor src de la imagen desde el directorio

			$("#imagen").attr("src",img);

			$("#selImagenes").css('background-image','url('+img+')');

			$('#imagen').show();//Muestra la imagen

		}

	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Documento sin título</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<script type="text/javascript">

// Cuando se carge el documento por completo

$(document).ready(function(e) {

	// Cuando se seleccion una opción del select

	$('.opcion').click(function(e) {

		// Si el texto del option es igual a "Personalizar"

		if( $(this).text() == "Personalizar" )

		{

			// Mostramos el formulario para introducir un avatar personalizado

			$("#avatarPersonal").show();

		}

		// Si no es "Personalizar"

		else

		{

			// Ocultamos el formulario de avatar personalizado

			$("#avatarPersonal").hide();

			// Capturamos el valor del option seleccionado, 

			// lo convertimos en la ruta de la imagen

			// y se lo asignamos a la variable imagen

			img="img/icons/avatar/"+ $(this).val();

			// Como el elemento que tiene la id="imagen", es un elemento imagen

			// asignamos a su atributo src, el valor de la variable imagen,

			// y así se verá la imagen seleccionada

			$("#imagen").attr("src",img);

			// Ahora asignamos al elemento que tiene la id="selImagenes",

			// la imagen de fondo

			// usando la propiedad 'background-image' de css,			

			$("#selImagenes").css('background-image','url('+img+')');

		}

	});

	// Cuando se haya seleccionado una imagen personalizada,

	// el valor del elemento que contienen el id='imgRemota',

	// cambiará, y entonces queremos que...

	$('#imgRemota').change(function(event) {

		// se asigne a la variable tmppath, la rúta completa de la imagen seleccionada

		var tmppath = URL.createObjectURL(event.target.files[0]);

		// y se asigne al atributo src del elemento que tiene la id="imagen"

		// el valor de la variable tmppath

		$('#imagen').attr('src',tmppath);

	});

});

</script>

<style>

#imagen { display:inline-block; width:200px; height:200px; align-content:center  }

#avatarPersonal { display:none }

.seleccion_avatar{ padding-left:40px; background-repeat:no-repeat; background-size:38px; }

button, .inputfile + label { border:black 1px solid; background-color:rgba(179,94,0,0.63); padding: 0px 10px }

.inputfile { display:none; color:white}

.inputfile:focus + label,

.inputfile + label:hover {

    background-color: rgba(179,94,0,0.9);

}

</style>

<body>

<?php

$directorio="img/icons/avatar/";

$dir = opendir("$directorio") ;

$cod='<select id="selImagenes" class="seleccion_avatar" name="avatar_usuario" onChange="showimage(this)">';

	$cod.='<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

		while ($file = readdir($dir))

		{

			if ($file != "." && $file != "..")

			{	$cod.='<option class="opcion" value="'.$file.'">'.$file.'</option>'; }

		}

	$cod.='<option class="opcion">Personalizar</option>';

$cod.='</select>';

closedir($dir);

?>

<div>

	<img class="image_avatar" id="imagen" src="<?php echo $directorio.$file ?>" alt="" name="avatar_usuario" onload="recargar()" width="108px" height="auto">

</div>

<?=$cod;?>

<!--

	Formulario para ofrecer la posibilidad de especificar un avatar personalizado

	Falta indicar donde se enviará el formulario y que método se usará

-->

<form id="avatarPersonal">

	<!-- Elemento que servirá para seleccionar la imagen -->

	<input class="inputfile" type="file" name="imgRemota" id="imgRemota"/>

	<!-- Elemento para personalizar el texto del botón -->

	<label for="imgRemota"><strong>Selecciona una Imagen</strong></label>

	<!-- Botón para enviar el formulario con la imagen seleccionada -->

	<button type="submit" value="Enviar">Enviar</button>

</form>

</body>

</html>

function validar(){

	var nombre, usuario, password, rpassword, email;

	nombre = document.getElementById("nombre").value;

	apellidos = document.getElementById("apellidos").value;

	usuario = document.getElementById("usuario").value;

	password = document.getElementById("password").value;

	rpassword = document.getElementById("rpassword").value;

	email = document.getElementbyId("email").value;

	expresion = /\w+@\w+\.[a-z]/;

	if(nombre === "" || usuario === "" || password === "" || rpassword === "" || email === ""){

	alert("rellene los campos obligatorios");

	return false;

	}

	else if(nombre.length > 30){

		alert("El nombre es muy largo");

		return false;

	}

	else if(apellidos.length > 30){

		alert("Los apellidos son muy largos");

		return false;

	}

	else if(usuario.length > 20 || password.length > 20){

		alert("El Usuario y la Contraseña solo deben de tener 20 cararacteres como maximo");

		return false;

	}

	else if(email.length > 100){

		alert("El email es muy largo");

		return false;

	}

	else if(expresion.test(email)){

		alert("El correo no es valido");

		return false;

	}

	var espacios = false;

    var cont = 0;

    while (!espacios && (cont < password.length)) {

      if (password.charAt(cont) == " ")

        espacios = true;

      cont++;

    }

 	  if (espacios) {

      alert ("La contraseña no puede contener espacios en blanco");

      return false;

    }

	  if (password.length == 0 || rpassword.length == 0) {

      alert("Los campos de la password no pueden quedar vacios");

      return false;

    }

	  if (password != rpassword) {

      alert("Las passwords deben de coincidir");

      return false;

    } else {

      alert("Todo esta correcto");

      return true;

    }

}

<form id="avatarPersonal">

	<?php

	$formatos_imagen = array('.png', '.gif');

	$directorio_imagenes = 'img/icons/avatar/';

	if(isset($_POST['botEnviar']))

	{

		$nombre_archivo = basename ($_FILES['archivo']['name']);

		$nombre_tmp_archivo = $_FILES['archivo']['tmp_name'];

		$extension_archivo = substr($nombre_archivo, strrpos($nombre_archivo, '.'));

		if(in_array($extension_archivo,$formatos_imagen))

		{

			if(move_uploaded_file($nombre_tmp_archivo, $directorio_imagenes.$nombre_archivo))

			{

				echo "Archivo $nombre_archivo subido correctamente";

			}

			else

			{

				echo "Error al subir el archivo";

			}

		}

		else

		{

			echo"Archivo no permitido";

		}

	}

?>

	<input class="inputfile avatarPersonal" type="file" name="imgRemota" id="imgRemota"/>

	<label class="etiqueta_avatarPersonal" for="imgRemota"><strong>Sube tu propio avatar</strong></label>

</form>

$cod.='<option class="opcion" value="'$directorio/'". Anonimo.png selected>- Sin imagen -</option>';

$url_avatar=" "

$url_avatar='"img/icons/avatar"'." "

$url_avatar = mysqli_real_escape_string($ConDB, $_POST['url_avatar']);

<button type="submit" name="borrar_categoria" value="Eliminar categoria"><img src="img/icons/borrar.png" width="32px" height="auto"></button>

<?php

$directorio="img/icons/avatar/";

$dir = opendir("$directorio") ;

$cod='<select id="selImagenes" class="seleccion_avatar" name="avatar_usuario" onChange="showimage(this)">';

$_POST['url_avatar'] = $directorio.'selected';

	  foreach($select as $file)

	  {

	   echo "<option ";

	    if(isset($_POST['$file']))

		     {

				 echo "selected";

			 }

			 echo '>' .$file.'</option>';

	  }

	$cod.='<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

		while ($file = readdir($dir))

		{

		if ($file != "." && $file != "..")

			{

			$cod.='<option class="opcion" value="'.$file.'">'.$file.'</option>';

			}

		}

			$cod.='<option class="opcion">Personalizar</option>';

$cod.='</select>';

closedir($dir);

?>

<form id="avatarPersonal">

	<?php

	$formatos_imagen = array('.png', '.gif');

	$directorio_imagenes = 'img/icons/avatar/';

	if(isset($_POST['botEnviar']))

	{

		$nombre_archivo = basename ($_FILES['archivo']['name']);

		$nombre_tmp_archivo = $_FILES['archivo']['tmp_name'];

		$extension_archivo = substr($nombre_archivo, strrpos($nombre_archivo, '.'));

		if(in_array($extension_archivo,$formatos_imagen))

		{

			if(move_uploaded_file($nombre_tmp_archivo, $directorio_imagenes.$nombre_archivo))

			{

				echo "Archivo $nombre_archivo subido correctamente";

			}

			else

			{

				echo "Error al subir el archivo";

			}

		}

		else

		{

			echo"Archivo no permitido";

		}

	}

?>

<?php

$directorio="img/icons/avatar/";

$dir = opendir("$directorio") ;

$cod='<select id="selImagenes" class="seleccion_avatar" name="avatar_usuario" onChange="showimage(this)">';

$_POST['url_avatar'] = $directorio.'selected';

	  foreach($option as $file)

	  {

	   echo "<option ";

	    if(isset($_POST['$file']))

		     {

				 echo "selected";

			 }

			 echo '>' .$file.'</option>';

	  }

	$cod.='<option class="opcion" value=$directorio/Anonimo.png selected>- Sin imagen -</option>';

		while ($file = readdir($dir))

		{

		if ($file != "." && $file != "..")

			{

			$cod.='<option class="opcion" value="'.$file.'">'.$file.'</option>';

			}

		}

			$cod.='<option class="opcion">Personalizar</option>';

$cod.='</select>';

closedir($dir);

?>