Tiny File Manager

Back Back Up Advanced Editor

<!--
https://phppot.com/jquery/php-ajax-multiple-image-upload-using-jquery/   +++++

https://makitweb.com/how-to-upload-multiple-image-files-with-jquery-ajax-and-php/ a voir

https://taylor.callsen.me/ajax-multi-file-uploader-with-native-js-and-promises/

https://www.yogihosting.com/jquery-file-upload/
/*
https://www.c-sharpcorner.com/blogs/multiple-file-upload-using-mvc-jquery-ajax-post

https://orangeable.com/javascript/async-file-upload

https://adarshjaiswal.com/how-to-upload-multiple-files-with-jquery-ajax-and-php/

https://qawall.in/upload-multiple-files-using-php-jquery-and-ajax/

https://digitalfox-tutorials.com/tutorial.php?title=Preview-validate-and-upload-multiple-files-with-javascript-AJAX-and-PHP

https://makitweb.com/how-to-upload-multiple-files-with-javascript-and-php/

https://cloudinary.com/blog/file_upload_with_ajax

https://qirolab.com/posts/how-to-upload-multiple-images-with-jquery-ajax-and-php-with-preview

https://www.geeksforgeeks.org/spring-mvc-multiple-file-upload-with-progress-bar-in-ajax-and-jquery/

https://carlofontanos.com/ajax-multi-file-upload-with-image-preview-and-sort-incomplete-project/

https://brainbell.com/php/ajax-form-validation.html

https://www.codexworld.com/upload-multiple-images-using-jquery-ajax-php/  mais incomplet !!!

https://carlofontanos.com/ajax-multi-file-upload-in-codeigniter/

https://www.webslesson.info/2017/03/upload-multiple-files-codeigniter-ajax-jquery.html

ajax  beforeSend:function()

https://www.tutsplanet.com/multiple-files-upload-using-ajaxjquery-in-codeigniter/

ajax beforesend show loading

https://www.studentstutorial.com/ajax/loading-image-ajax

https://makitweb.com/display-loading-image-when-ajax-call-is-in-progress/

https://jsfiddle.net/ali_almahdi/pbdUt/

https://stackoverflow.com/questions/23219033/show-a-progress-on-multiple-file-upload-jquery-ajax

-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

function uploadFiles() 
{
    var fileInput = document.getElementById('fileUpload');
    var files = fileInput.files;

for (var i = 0; i < files.length; i++) 
    {
        var allowedExtensions = ['.jpg', '.jpeg', '.png', '.pdf', '.svg', '.zip', '.docx', '.xlsx'];
        var fileExtension = files[i].name.substring(files[i].name.lastIndexOf('.')).toLowerCase();

if (allowedExtensions.includes(fileExtension)) 
        {
            uploadFile(files[i]);
        } 
        else 
        {
            alert('Invalid file type: ' + fileExtension);
        }
    }

function uploadFile(file)
    {
        var formData = new FormData();
        formData.append('file', file);
    }
}

$(document).ready(function()
{

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

var form_data = new FormData();

// Read selected files
      var totalfiles = document.getElementById('files').files.length;
      for (var index = 0; index < totalfiles; index++) 
      {
       // alert(document.getElementById('files').files[index].value);
       // console.log(" File " + document.getElementById('files').files[index]);
           form_data.append("files[]", document.getElementById('files').files[index]);
      }

/* for (var pair of form_data.entries()) {
    console.log(pair[0]+ ' - ' + pair[1]); 
}
*/
for (let keyValue of form_data.entries()) 
{
		console.log(keyValue);
	}

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

beforeSend: function()
           {
                /* Show image container */
                $("#loader").show();
            },

success: function (response) 
           {

alert(response);
            //$("#SomeDiv").html(response);     
            $("#myElem").show();
            $("#loader").hide();
                /*for(var index = 0; index < response.length; index++) 
                {
                     var src = response[index];

// Add img element in <div id='preview'>
                     //$('#preview').append('<img src="'+src+'" width="200px;" height="200px">');
                     
                     $("#myElem").show();
                     //$('#preview')
                }*/

}
           /*,
           complete: function(data)
           {
            
            $("#loader").hide();
            }*/
      });

});

</script>

<input type="file" id="fileUpload" multiple /> 
    <br>
    <br>
    <button onclick="uploadFiles()">Upload</button>

<div id='preview'></div>

<p id="myElem" style="display:none">Bravo Patrice ...</p>