Tiny File Manager

Back Back Up Advanced Editor

<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/themes/blitzer/jquery-ui.min.css">

<link rel="stylesheet" href= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script src= "https://code.jquery.com/jquery-2.1.3.js"></script> 
<script src= "https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

var resultat = [];
            
$(document).ready(function(){

$('#submit').click(function(){

var form_data = new FormData();

// Read selected files
            var totalfiles = document.getElementById('files').files.length;

if( totalfiles == 0)
            {
                $("#demoDialog").dialog( {
                    resizable: false,
                    width: 250,
	                height: 175,
                    modal: true,
		            overlay: {
			                    opacity: 0.5,
			                    background: "black"
		            }

}

); 
                //alert("Error !");
                
									/*$( "#message_expiration" ).dialog({
									modal: true,
									title: "Infos",
									buttons: {
												Ok: function()
												{
													$( this ).dialog( "close" );
													
												}
											 }
										});*/
							
            }

else
            {
                    for (var index = 0; index < totalfiles; index++) 
                    {
                        form_data.append("files[]", document.getElementById('files').files[index]);

}

// AJAX request
                    $.ajax({
                        url: 'envoi_multiples03.php', 
                        type: 'post',
                        data: form_data,
                        dataType: 'json',
                        contentType: false,
                        processData: false,

beforeSend: function()
                        {
                            $("#loader").show();
                        },

success: function (response) 
                        {
                                for(var index = 0; index < response.length; index++)
                                {
                                    var src = response[index];
                                    console.log(" ----- TEMP -------" + response[index]);
                                    resultat.push(response[index]);
                                    $('#preview').append('<img src="'+src+'" width="200px;" height="200px">');
                                }
                        },

complete: function (data) 
                        {
                                    console.log(" ----- FIN -------" + resultat);
                                    $("#loader").hide();
                                    $('#user_reponse').html( " Yes !" );

var html = "<table>";
                                    for( var i=0; i < resultat.length ; i++ )
                                    {
                                        var text = resultat[i]; //  + " : envoi réussi."

html += "<tr>";
                                        html += "<td>" + text + "</td>";

if( text.indexOf("Erreur") !== -1)    
                                        {    
                                            html += "<td><img src='error.png' alt='Image' width='32' height='32'></td>";
                                        }
                                        else
                                        {
                                            html += "<td><img src='check.png' alt='Image' width='32' height='32'></td>";    
                                        }

html += "</tr>";
                                    } 
                                    html += "</table>";

document.getElementById("resultat").innerHTML = html;
                        }

});
            }
    });

});
        </script>

<div id="loader" style="display: none;">
<img src="wait.gif" alt="Envoie ..." width="50" height="60">
</div>

<div id="dialog" title="Basic dialog"  style="display:none">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

<div id="message_expiration" style="display: none">
    <p>
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    La session a expiré. veuillez vous reconnecter.
    </p>
    </div>

<div id="demoDialog" title="My Dialog Box" style="display:none"> 
        <p>Welcome to GeeksforGeeks</p> 
    </div>