File "custom_multiple03.html"

Full Path: /home/analogde/www/Prog/File explorer/custom_multiple03.html
File size: 6.09 KB
MIME-type: text/html
Charset: utf-8

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

<!--
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/themes/blitzer/jquery-ui.min.css
-->
<!--
<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://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">  a voir !!!
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
-->

<!--   OK -->
<!--<link rel="stylesheet" href= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.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> 
<!--      -->

<script> 
   /* $(document).ready(function() { 
        $("#demoDialog").dialog(); 
    }); */
</script> 

        <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>

<form method='post' action='' enctype="multipart/form-data">
    <input type="file" id='files' name="files[]" multiple><br>
    <input type="button" id="submit" value='Upload'>
</form>

<div id="preview"></div>

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

<p id="user_reponse"></p>

<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> 

    <p id="resultat"></p>