How to upload multiple files through one upload button

Question

When I am executing it not all of my files are uploaded but just one of them.

JavaScript

function upload() {
    document.getElementById("uploading").innerHTML="uploading....";
    var myfile=document.getElementById("fileinput").files[0];

    //alert(myfile.size);
    var r = new FileReader();

    r.onload = function(e) { 
        var contents = e.target.result;

        parseContents(contents);
        //document.getElementById("cont").innerHTML=fileContent;

        document.getElementById("uploading").innerHTML="<h3>File uploaded: "+myfile.name;
    }

    r.readAsText(myfile);
}

HTML

<body onload="initialize()">
    <div id="container1"><h>MY TRANSIT PLANNER</h></div>
    <h3 style="text-decoration:underline;">choose a file for input:</h3>
    <input type="file" id="fileinput" multiple="multiple"onchange="upload()"/>
    <br>
    <div style="color: black" id="uploading"></div>
    <script src="https://maps.googleapis.com/maps/api/js?"async defer></script>
    <input type="button" id="btn-sgtd" type="text" value="SAVE GTD" onclick="writetofile()"/>
    <h3 style="text-decoration:underline;">Choose files to Segment: </h3>
    <form action="files.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="my_file[]" multiple="multiple"><br>
        <br>
        <input type="submit" value="SEGMENT" class="button"><br>
    </form>
    <div id="map"></div>
</body>

Possible duplicate of Multiple files select and upload

You Old Fool
– You Old Fool

2016-06-08 07:21:23 +00:00
Commented Jun 8, 2016 at 7:21 — You Old Fool
– You Old Fool, Commented Jun 8, 2016 at 7:21

emirsnck · Accepted Answer · 2016-06-08 07:32:45Z

1

you should do loop

   function upload() {


    for (var i = 0; i < document.getElementById("fileinput").files.length; i++) 
        {                           
                document.getElementById("uploading").innerHTML="uploading....";
                var myfile=document.getElementById("fileinput").files[i];
                //alert(myfile.size);
                var r = new FileReader();
                r.onload = function(e) 
                { 
                    var contents = e.target.result;

                    parseContents(contents);
                    //document.getElementById("cont").innerHTML=fileContent;

                    document.getElementById("uploading").innerHTML="<h3>File uploaded: "+myfile.name;
                }

                r.readAsText(myfile);
        }
}

answered Jun 8, 2016 at 7:32

emirsnck

444 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar Vardani · Accepted Answer · 2016-06-08 07:26:28Z

0

try this will help you

    function upload() {
        document.getElementById("uploading").innerHTML="uploading....";
        var myfile=document.getElementById("fileinput").files[0];

        //alert(myfile.size);
        var r = new FileReader();

        r.onload = function(e) {

        if(!e.target.files) return;

        var files = e.target.files;
        for(var i=0; i < files.length; i++) {
            var f = files[i];
             document.getElementById("uploading").innerHTML="<h3>File uploaded: "+f;
        }
    }

answered Jun 8, 2016 at 7:26

Sagar Vardani

467 bronze badges

Collectives™ on Stack Overflow

How to upload multiple files through one upload button

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related