Click here to Skip to main content
15,884,388 members
Articles / Programming Languages / PHP
Tip/Trick

PHP Multiple File Uploader

Rate me:
Please Sign up or sign in to vote.
4.00/5 (1 vote)
17 Oct 2013CPOL1 min read 13.2K   737   1  
PHP multiple file uploader

Introduction

This is an Ajax script (with PHP and JavaScript) to upload multiple files at the same time, by adding multiple upload boxes in the form. This script is from coursesweb.net. This script can be implemented and used in both HTML and PHP files, but the server must run PHP.

This upload script uses the Ajax technology, the files are uploaded without opening or reloading the page, so a refresh will not resend any form data to the server.

Instructions for Use

  • Copy the files: "uploader.php", and "upload.js" on your server, in the same directory as the file in which you want to add this script.
  • In your file (.html or .php), add the following code (that creates the upload form):
    HTML
    <div id="ifrm"> </div>
    <form id="uploadform" action="uploader.php" method="post" 
    enctype="multipart/form-data" target="uploadframe" onsubmit="uploading(this); return false">
      <input type="file" class="file_up" name="file_up[]" />
      <input type="submit" value="UPLOAD" id="sub" />
    </form>
    <script type="text/javascript" src="upload.js"></script>
    <button onclick="add_upload('uploadform'); return false;">New upload box</button>
  • Add the following CSS code, in the HEAD section of your HTML document (this makes the input form fields to be displayed one under the other).
    HTML
    <style type="text/css">
    #uploadform input {
      display:block; 
      margin:3px auto;
    }
    </style>
  • Also, study and test the file "test.html" (it must be run on server).

Details

  • The directory in which the files will be uploaded is named "upload" (you can change it in the "uploader.php" file, to "$updir" variable). You must create this folder on the server and set it CHMOD 0777 permissions.
  • To change the extension type allowed for upload, modify the array in "$allowtype" variable.
  • To change the maxim size allowed for the uploaded files, in kilobytes, modify the value of the "$max_size" variable, initially 500 KB (the maxim size allowed for the uploaded files also depends on server settings).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Chief Technology Officer Microbold Smart - Systems
Nigeria Nigeria
Passionate about web and applications technology.

Comments and Discussions

 
-- There are no messages in this forum --