Upload Multiple Files with PHP and JQuery

Question

I have been trying my hands on PHP lately, so far so good until I hit a brick wall. Here's a little piece of code that I have. It's allowing me to upload a single file, but what I want is to be able to upload multiple files.

Here's the PHP and HTML files:

<html>
<head>
  <meta charset="utf-8" />
  <title>Ajax upload form</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    function sendfile(){
        var fd = new FormData();  

        for (var i = 0, len = document.getElementById('myfile').files.length; i < len; i++) {
            fd.append("myfile", document.getElementById('myfile').files[i]);                
        }

        $.ajax({
          url: 'uploadfile.php',
          data: fd,
          processData: false,
          contentType: false,
          type: 'POST',      
          success: function(data){
            alert(data);
          }
        });         
    }
  </script>

</head>
<body>
    <form action="uploadfile.php" method="post" enctype="multipart/form-data" id="form-id">

    <p><input id="myfile" type="file" name="myfile" multiple=multiple/>
    <input type="button" name="upload" id="upload" value="Upload" onclick="sendfile()" id="upload-button-id"  /></p>
    </form>
</body>
</html>

And the PHP file:

<?php

    $target = "uploadfolder/"; 
    //for($i=0; $i <count($_FILES['myfile']['name']); $i++){
        if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target.$_FILES['myfile']['name'])) { 
            echo 'Successfully copied'; 

        }else{       
            echo 'Sorry, could not copy';
        }   
    }// 

?>

Any help would be highly appreciated.

You probably want to look into a jQuery plugin to handle your uploads, as it is not as easy as just passing a filename in an AJAX call. Look here for some options sitepoint.com/jquery-file-upload-plugins — Mike Brant
– Mike Brant, Commented Jun 11, 2014 at 16:33
@MikeBrant - it works - only that it's uploading the last file from the list of the selected/uploaded files. — Helen Neely
– Helen Neely, Commented Jun 11, 2014 at 16:36

Alexander Ceballos · Accepted Answer · 2014-06-11 17:05:59Z

12

Index.html

<html>
    <head>
        <title>Load files</title>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                $('#myfiles').on("change", function() {
                    var myfiles = document.getElementById("myfiles");
                    var files = myfiles.files;
                    var data = new FormData();

                    for (i = 0; i < files.length; i++) {
                        data.append('file' + i, files[i]);
                    }

                    $.ajax({
                        url: 'load.php', 
                        type: 'POST',
                        contentType: false,
                        data: data,
                        processData: false,
                        cache: false
                    }).done(function(msg) {
                        $("#loadedfiles").append(msg);
                    });
                });



            });
        </script>
    </head>
    <body>

        <div id="upload">
            <div class="fileContainer">
                <input id="myfiles" type="file" name="myfiles[]" multiple="multiple" />
            </div>
        </div>
        <div id="loadedfiles">

        </div>
    </body>
</html>

load.php

<?php
    $path="myfiles/";//server path
    foreach ($_FILES as $key) {
        if($key['error'] == UPLOAD_ERR_OK ){
            $name = $key['name'];
            $temp = $key['tmp_name'];
            $size= ($key['size'] / 1000)."Kb";
            move_uploaded_file($temp, $path . $name);
            echo "
                <div>
                    <h12><strong>File Name: $name</strong></h2><br />
                    <h12><strong>Size: $size</strong></h2><br />
                    <hr>
                </div>
                ";
        }else{
            echo $key['error'];
        }
    }
?>

answered Jun 11, 2014 at 17:05

Alexander Ceballos

7702 gold badges20 silver badges36 bronze badges

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

4 Comments

Helen Neely Over a year ago

Thank you for the code, will test it and report back.

Helen Neely Over a year ago

Your code worked brilliantly - you deserve the big green check mark :)

Hitesh Over a year ago

How to upload this if I have multiple input files tags (lowRes, mediumRes, highRes )?? .... here it only adds the last file i am adding

Alexander Ceballos Over a year ago

Source: lax-soft.tk/index.php/programacion/php-y-jquery/…

Collectives™ on Stack Overflow

Upload Multiple Files with PHP and JQuery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related