single and multiple file upload

I'm facing issue. single and multiple file uploaded file. Then multiple file upload successfully but when single file one by one upload then last one upload other are override by last one. Please help me to find out this problem solution. As you can see below code it's work properly for multiple upload file and send data by ajax then get array value all images but when upload single upload one by one then last one image data get only in ajax data in. please help me to provide me solution. index.php `

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<style>
    #selectedFiles img {
        max-width: 200px;
        max-height: 200px;
        float: left;
        margin-bottom: 10px;
    }
</style>

<body>


    <form id="myForm" method="post">

        <input type="file" id="files" class="file_uploader_file" name="files[]" multiple="true" accept="image/*" />
        <p class="validateError" id="imgerror" style="color:red;display:none;">Please select your design.</p>

        <input type="button" id="fees_stream_submit1" name="submit">
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
        (function () {
            $(document).on('click', '#fees_stream_submit1', function (e) {

                var myfiles = document.getElementById("files");
                // var myfiles = $('#files').val();
                var files = myfiles.files;
                var form = new FormData();
                alert(files.length);
                for (i = 0; i < files.length; i++) {
                    form.append('file' + i, files[i]);
                }

                $.ajax({
                    url: "fileuploadmultidata.php",
                    type: "POST",
                    data: form,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        // alert(result);
                    }
                });

            });

        })();

        $(document).ready(function () {
            var imgCnt = 0;
            var onebyoneImg = [];
            var countImg = 1;
            if (window.File && window.FileList && window.FileReader) {
                $("#files").on("change", function (e) {
                    var files = e.target.files,
                        filesLength = files.length;
                    for (var i = 0; i < filesLength; i++) {
                        var f = files[i];
                        // var f = new File([""], files[i]);
                        var fileReader = new FileReader();
                        fileReader.onload = (function (e) {
                            imgCnt++;
                            alert(imgCnt);
                            var file = e.target;
                            $("<span class='pip'><div class=\"file_uploaded_view img-thumb-wrapper image-preview-height\">" +
                                "<img class=\"img-thumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\" style='heigh:100px;width:100px'/>" +
                                "<br/><span class='remove'><i class='fa fa-trash'></i></span></span>" +
                                "</div>").insertAfter("#files");
                            $(".remove").click(function () {
                                $(this).parent(".img-thumb-wrapper").remove();
                                imgCnt--;
                            });

                        });
                        fileReader.readAsDataURL(f);
                    }
                    console.log(f);
                });
            } else {
                alert("Your browser doesn't support to File API")
            }
        });
    </script>

</body>

</html>
`
**fileuploadmultidata.php**
`<?php
echo "<pre>";
print_r($_FILES);die();
?>`

Solution

The behaviors of file uploading will be like that only see https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fileupload_files

To achieve your requirement you need to store file values in variable and use.

var storeMultiFiles = []; 

var file = $(file_id)[0].files;
for(var l=0; l<file.length; l++){
    var fileData = file[l];
    (function(file) {
        var fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = function(oFREvent){
           storeMultiFiles.push(oFREvent.target.result)
        };
    })(fileData);
}

Use files details using "storeMultiFiles" for show, save, update and delete for selected.