<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title> Subir archivos </title>
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="js/upload.js"></script>
	    <link rel="stylesheet" href="css/style.css?1" type="text/css"/>
        <script type="text/javascript">
          var folio=<?php echo $_GET['folio'];?>

            function subirArchivos() {
                $("#archivo").upload('subir_archivo.php?folio='+folio,
                        {
                            nombre_archivo: $("#nombre_archivo").val()
                        },
                function(respuesta) {
                    //Subida finalizada.
                    $("#barra_de_progreso").val(0);
                    if (respuesta === 1) {
                        alert('El archivo ha sido subido correctamente.');
                        $("#nombre_archivo, #archivo").val('');
                    } else {
                        alert('El archivo NO se ha podido subir.');
                    }
                    mostrarArchivos();
                }, function(progreso, valor) {
                    //Barra de progreso.
                    $("#barra_de_progreso").val(valor);
                });
            }
            function eliminarArchivos(archivo) {
                $.ajax({
                    url: 'eliminar_archivo.php?folio='+folio,
                    type: 'POST',
                    timeout: 10000,
                    data: {archivo: archivo},
                    error: function() {
                        alert('Error al intentar eliminar el archivo.');
                    },
                    success: function(respuesta) {
                        if (respuesta == 1) {
                            alert('El archivo ha sido eliminado.');
                            mostrarArchivos();
                        } else {
                            alert('Error al intentar eliminar el archivo.');
                        }
                    }
                });
            }
            function mostrarArchivos() {
                $.ajax({
                    url: 'mostrar_archivos.php?folio='+folio,
                    dataType: 'JSON',
                    success: function(respuesta) {
                        if (respuesta) {
                            var lista = $("'<ul></ul>'");
                            for (var i = 0; i < respuesta.length; i++) {
                                if (respuesta[i] != undefined) {
					var icon="archivo.png";

				
				if(respuesta[i].indexOf("xls")!=-1||respuesta[i].indexOf("xlsx")!=-1)
				icon="excel.png";
				else if(respuesta[i].indexOf("doc")!=-1||respuesta[i].indexOf("docx")!=-1)
				icon="word.png";
				else if(respuesta[i].indexOf("pdf")!=-1)
				icon="pdf.png";
				else icon="archivo.png";
			

                                    lista.append('<li ><img class="eliminar_archivo" src="img/delete.png" width="32"/><img height="70" src="img/'+icon+'"/> <span> ' + respuesta[i] + ' </span> </li>');
                                }
                            }
                            $("#archivos_subidos").html(lista);
                        }
                    }
                });
            }
            $(document).ready(function() {
                mostrarArchivos();
                $("#boton_subir").on('click', function() {
                    subirArchivos();
                });
                $("#archivos_subidos").on('click', '.eliminar_archivo', function() {
 var archivo = $(this).parents('li').find('span').text();
                    archivo = $.trim(archivo);
		 var r = confirm("Esta seguro que desea eliminar el archivo "+archivo+"?");
if (r == true) {

                    eliminarArchivos(archivo);
} else {

}
                   
                });
            });
        </script>
    </head>
    <body>
        <form action="javascript:void(0);">
            <label> Subir archivo: </label>
               <input type="file" name="archivo" id="archivo" />
            
            <input type="submit" id="boton_subir" value="Subir" />
            <br />
           
        </form>
        <div id="archivos_subidos"></div>
    </body>
</html>
