Veran tengo el diseño hecho ya, así como tambien el codigo javascript que me permite visualizar la foto antes de subirla o guardarla en el servidor,pero lo que no entiendo es como hacer ese codigo que me permita mandar la foto al servidor.ya tengo lista la pagina en la que se escribe el codigo PHP(que es lo que me hace falta),y el formulario tambien preparado.Podrian ayudarme?.He encontrado algunos en la web,pero son viejos y no utilizan Mysqli.Quizas piensen porque no he hecho nada,pero es que no se.La foto se subira desde una ventana modal(la cual ya esta funcionando).Necesito una ayudita,porfavor.
HTML
<div id="id02" class="modal-foto">
<div class="modal-content-foto">
<div class="cabezera-modal">
<span onclick="document.getElementById('id02').style.display='none'" class="closebtn-foto">×</span>
<h2>Modal Header Foto</h2>
</div>
<div class="container-pic">
<form id="subir-foto" action="subir-foto.php" method="POST">
<div class="img-wrapper">
<img id="thumbnil" style="width:100%;height:100%;border-radius:50%; " src="" alt="Foto aqui.!">
</div>
<div class="upload">
<input type="file" accept="image/*" onchange="showMyImage(this)" class="custom-file-input">
<button id="btn-opc-photo" onclick="document.getElementById('id02').style.display='block'" class="w3-btn"></button>
</div>
<div style="height:1px;background:#e3e3e3;width:100%;" class="divider"></div>
</form>
<div class="w3-container jaja">
<button type="button" id="abandono" onclick="document.getElementById('id02').style.display='none'"><i class="fa fa-ban" aria- hidden="true"></i>Cancelar</button>
<button id="listo" type="submit" form="subir-foto" value="submit"><i class="fa fa-check-circle-o" aria-hidden="true">
</i>Ya</button>
</div>
</div>
</div>
</div>
JAVASCRIPT PARA VISUALIZAR
<script>
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
</script>