Upload Multiple Images at Once using PHP ...

Using PHP and FancyUpload you can select multiple files to upload at once. FancyUpload is a powerful and elegant Ajax file uploading script that is easy to setup and configure. What makes FancyUpload attractive to use for uploading files is that it’s server independent and completely styliable using CSS and XHTML, plus it uses MooTools to function across modern browsers.

The purpose of this tutorial is to show you how to use FancyUpload for uploading multiple images at once using PHP. Please note that FancyUpload is able to upload other file types as well. I recommend you visit their website to see other showcases.

About PHP File Upload

When posting form inputs of “file” type, PHP uses the global $_FILES array to upload a file from a client computer to the remote server. The $_FILES array contains the following parameters:

 
$_FILES["file"]["tmp_name"] // A temporary name designated by the server
$_FILES["file"]["name"] // Original filename
$_FILES["file"]["type"] // Mime-type, in this case "image-type"
$_FILES["file"]["size"] // File size in bytes
$_FILES["file"]["error"] // Error code information about failed upload

File Upload and Security

It is important to use an upload mechanism that prevents malicious users from performing any unauthorized task. The code below uses the move_uploaded_file($filename, $destination) function to ensure that the file designated by $filename is a valid upload file (meaning that it was uploaded via PHP’s HTTP POST upload mechanism).

If the file is valid, it will be moved to the $filename given by the $destination parameter. However, if $filename is not a valid upload file, then no action will occur, and move_uploaded_file() will return FALSE. If $filename is a valid upload file, but cannot be moved for some reason, no action will occur, and move_uploaded_file() will return FALSE. Additionally, a warning will be issued.

This sort of check is especially important if there is any chance that anything done with uploaded files could reveal their contents to the user, or even to other users on the same system.
 
/***BOF FILE UPLOAD***/

// Check that the images directory exists
if(file_exists($upload_directory))
{         
    // Upload file or return error message information
    if(!move_uploaded_file($_FILES[Filedata][ mp_name], $upload_directory .$_FILES[Filedata][ ame]))
    {
        $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
    }
}
      
/***EOF FILE UPLOAD***/

See Demo

Before you Begin

You can download the complete ActionScript and JavaScript source files, documentation and showcases from the FancyUpload website or you can copy and paste the source code below which is intended to work for uploading images only by restricting the file type.

If you don’t already have a directory for the incoming files you will need to create one. Using FileZilla or your favorite FTP client, create a directory and assign it file permissions 777.

FancyUpload version 3.0 features:
- Ability to select multiple files to upload at one
- Filter file by type
- A lot of possible Events to add your own behaviour
- Show and filter useful file information before the upload starts
- Limit uploads by file count, type or size
- Platform and server independent, just needs Flash 9+ (> 95% penetration)
- Graceful Degradation, since the element is replaced after the Flash is loaded successfully
- Cancel running uploads, add files during upload
- Everything is optional, documented and easy editable

Compatibility
Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 3+) with Adobe Flash 9 and 10 player.

Source Files:

CSS Stylesheet
 
/**
 * FancyUpload Showcase
 *
 * @license     MIT License
 * @author      Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright   Authors
 */
 
/* CSS vs. Adblock tabs */
.swiff-uploader-box a {
    display: none !important;
}
 
/* .hover simulates the flash interactions */
a:hover, a.hover {
    color: red;
}
 
#demo-status {
    padding: 10px 15px;
    width: 420px;
    border: 1px solid #eee;
}
 
#demo-status .progress {
    background: url(../../assets/progress-bar/progress.gif) no-repeat;
    background-position: +50% 0;
    margin-right: 0.5em;
    vertical-align: middle;
}
 
#demo-status .progress-text {
    font-size: 0.9em;
    font-weight: bold;
}
 
#demo-list {
    list-style: none;
    width: 450px;
    margin: 0;
}
 
#demo-list li.validation-error {
    padding-left: 44px;
    display: block;
    clear: left;
    line-height: 40px;
    color: #8a1f11;
    cursor: pointer;
    border-bottom: 1px solid #fbc2c4;
    background: #fbe3e4 url(assets/failed.png) no-repeat 4px 4px;
}
 
#demo-list li.file {
    border-bottom: 1px solid #eee;
    background: url(assets/file.png) no-repeat 4px 4px;
    overflow: auto;
}
#demo-list li.file.file-uploading {
    background-image: url(assets/uploading.png);
    background-color: #D9DDE9;
}
#demo-list li.file.file-success {
    background-image: url(assets/success.png);
}
#demo-list li.file.file-failed {
    background-image: url(assets/failed.png);
}
 
#demo-list li.file .file-name {
    font-size: 1.2em;
    margin-left: 44px;
    display: block;
    clear: left;
    line-height: 40px;
    height: 40px;
    font-weight: bold;
}
#demo-list li.file .file-size {
    font-size: 0.9em;
    line-height: 18px;
    float: right;
    margin-top: 2px;
    margin-right: 6px;
}
#demo-list li.file .file-info {
    display: block;
    margin-left: 44px;
    font-size: 0.9em;
    line-height: 20px;
    clear
}
#demo-list li.file .file-remove {
    clear: right;
    float: right;
    line-height: 18px;
    margin-right: 6px;
}

Javascript and MooTools
 
/**
 * FancyUpload Showcase
 *
 * @license     MIT License
 * @author      Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright   Authors
 */
 
window.addEvent( wouldomready, function() { // wait for the content
 
    // our uploader instance
 
    var up = new FancyUpload2($( wouldemo-status), $( wouldemo-list), { // options object
        // we console.log infos, remove that in production!!
        verbose: true,
 
        // url is read from the form, so you just have to change one place
        url: $(form-demo).action,
 
        // path to the SWF file
        path: ../../source/Swiff.Uploader.swf,
 
        // remove that line to select all files, or edit it, add more items
        typeFilter: {
            Images (*.jpg, *.jpeg, *.gif, *.png): *.jpg; *.jpeg; *.gif; *.png
        },
 
        // this is our browse button, *target* is overlayed with the Flash movie
        target: wouldemo-browse,
 
        // graceful degradation, onLoad is only called if all went well with Flash
        onLoad: function() {
            $( wouldemo-status).removeClass(hide); // we show the actual UI
            $( wouldemo-fallback).destroy(); // ... and hide the plain form
 
            // We relay the interactions with the overlayed flash to the link
            this.target.addEvents({
                click: function() {
                    return false;
                },
                mouseenter: function() {
                    this.addClass(hover);
                },
                mouseleave: function() {
                    this.removeClass(hover);
                    this.blur();
                },
                mousedown: function() {
                    this.focus();
                }
            });
 
            // Interactions for the 2 other buttons
 
            $( wouldemo-clear).addEvent(click, function() {
                up.remove(); // remove all files
                return false;
            });
 
            $( wouldemo-upload).addEvent(click, function() {
                up.start(); // start upload
                return false;
            });
        },
 
        // Edit the following lines, it is your custom event handling
 
        /**
         * Is called when files were not added, "files" is an array of invalid File classes.
         *
         * This example creates a list of error elements directly in the file list, which
         * hide on click.
         */
        onSelectFail: function(files) {
            files.each(function(file) {
                new Element(li, {
                    class: validation-error,
                    html: file.validationErrorMessage || file.validationError,
                    title: MooTools.lang.get(FancyUpload, aremoveTitle),
                    events: {
                        click: function() {
                            this.destroy();
                        }
                    }
                }).inject(this.list, op);
            }, this);
        },
 
        /**
         * This one was directly in FancyUpload2 before, the event makes it
         * easier for you, to add your own response handling (you probably want
         * to send something else than JSON or different items).
         */
        onFileSuccess: function(file, response) {
            var json = new Hash(JSON.decode(response, true) || {});
 
            if (json.get( istatus) == 1) {
                file.element.addClass(file-success);
                file.info.set(html, <strong>Image was uploaded:</strong> + json.get(width) + x + json.get(height) + px, <em> + json.get( amime) + </em>));
            } else {
                file.element.addClass(file-failed);
                file.info.set(html, <strong>An error occured:</strong> + (json.get(error) ? (json.get(error) + # + json.get(code)) : response));
            }
        },
 
        /**
         * onFail is called when the Flash movie got bashed by some browser plugin
         * like Adblock or Flashblock.
         */
        onFail: function(error) {
            switch (error) {
                case hidden: // works after enabling the movie and clicking refresh
                    alert(To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).);
                    break;
                case locked: // This no *full* fail, it works after the user clicks the button
                    alert(To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).);
                    break;
                case empty: // Oh oh, wrong path
                    alert(A required file was not found, please be patient and we fix this.);
                    break;
                case flash: // no flash 9+ :(
                    alert(To enable the embedded uploader, install the latest Adobe Flash plugin.)
            }
        }
 
    });
 
});

PHP Image Upload Script
 
/**
     * Swiff.Uploader Example Backend
     *
     * This file represents a simple logging, validation and output.
     *  *
     * WARNING: If you really copy these lines in your backend without
     * any modification, there is something seriously wrong! Drop me a line
     * and I can give you a good rate for fancy and customised installation.
     *
     * No showcase represents 100% an actual real world file handling,
     * you need to move and process the file in your own code!
     * Just like you would do it with other uploaded files, nothing
     * special.
     *
     * @license     MIT License
     *
     * @author      Harald Kirschner <mail [at] digitarald [dot] de>
     * @copyright   Authors
     *
     */
  
  
    /**
     * Only needed if you have a logged in user, see option appendCookieData,
     * which adds session id and other available cookies to the sent data.
     *
     * session_id($_POST[SID]); // whatever your session name is, adapt that!
     * session_start();
     */
  
    // Request log
  
    /**
     * You don need to log, this is just for the showcase. Better remove
     * those lines for production since the log contains detailed file
     * information.
     */
  
    /*$result = array();
  
    $result[ ime]  = date( );
    $result[addr]  = substr_replace(gethostbyaddr($_SERVER[REMOTE_ADDR]), ******, 0, 6);
    $result[agent] = $_SERVER[HTTP_USER_AGENT];
  
    if(count($_GET))   { $result[get] = $_GET; }
    if(count($_POST))  { $result[post] = $_POST; }
    if(count($_FILES)) { $result[files] = $_FILES; }
  
    // we kill an old file to keep the size small
    if(file_exists( iscript.log) && filesize( iscript.log) > 102400) { unlink( iscript.log); }
  
    $log = @fopen( iscript.log, a);
  
    if($log)
    {
        fputs($log, print_r($result, true) . " --- ");
        fclose($log);
    }*/
  
  
    // Validation
  
    $error = false;
      
       // NOTE: You need to create a directory if it doesn already exist
       // Specify directory path for your images directory
    $upload_directory  = $_SERVER[DOCUMENT_ROOT] ."/fancyupload/uploads/";
  
    if(!isset($_FILES[Filedata]) || !is_uploaded_file($_FILES[Filedata][ mp_name])) { $error = Invalid Upload; }
  
    /**
     * You would add more validation, checking image type or user rights.
     *
     */
  
    if(!$error && $_FILES[Filedata][ isize] > 2 * 1024 * 1024) { $error = Please upload only files smaller than 2Mb!; }
    else if(!$error && !($size = @getimagesize($_FILES[Filedata][ mp_name]))) { $error = Please upload only images, no other files are supported.; }
    else if(!$error && !in_array($size[2], array(1, 2, 3, 7, 8))) { $error = Please upload only images of type JPEG, GIF or PNG.; }
    else if(!$error && ($size[0] < 25) || ($size[1] < 25)) { $error = Please upload an image bigger than 25px.; }
    else if(!$error && file_exists($upload_directory .$_FILES[Filedata][ mp_name])) { $error = $_FILES["Filedata"]["name"] ." already exists."; } 
  
  
    // Processing
  
    /**
     * Its a demo, you would move or process the file like:
     *
     * move_uploaded_file($_FILES[Filedata][ mp_name], ../uploads/ . $_FILES[Filedata][ ame]);
     * $return[ isrc] = /uploads/ . $_FILES[Filedata][ ame];
     *
     * or
     *
     * $return[link] = YourImageLibrary::createThumbnail($_FILES[Filedata][ mp_name]);
     *
     */
  
    if($error) { $return = array( istatus => , error => $error); }
  
    else
    {
        $return = array( istatus => 1, ame => $_FILES[Filedata][ ame]);
  
        // Our processing, we get a hash value from the file
        $return[hash] = md5_file($_FILES[Filedata][ mp_name]);
  
        // ... and if available, we get image data
        $info = @getimagesize($_FILES[Filedata][ mp_name]);
      
        /***BOF FILE UPLOAD***/
      
        // Specify directory path for your images directory
        $upload_directory  = $_SERVER[DOCUMENT_ROOT] ."/fancyupload/images/";
      
        // Check that the images directory exists
        if(file_exists($upload_directory))
        {         
            // Upload file or return error message information
            if(!move_uploaded_file($_FILES[Filedata][ mp_name], $upload_directory .$_FILES[Filedata][ ame]))
            {
                $error  = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
            }
        }
      
        /***EOF FILE UPLOAD***/
  
        if($info)
        {
            $return[width]  = $info[0];
            $return[height] = $info[1];
            $return[ amime]   = $info[ amime];
        }
  
    }
  
  
    // Output
  
    /**
     * Again, a demo case. We can switch here, for different showcases
     * between different formats. You can also return plain data, like an URL
     * or whatever you want.
     *
     * The Content-type headers are uncommented, since Flash doesn care for them
     * anyway. This way also the IFrame-based uploader sees the content.
     */
  
    if (isset($_REQUEST[ aresponse]) && $_REQUEST[ aresponse] == xml)
    {
        // header(Content-type: text/xml);
  
        // Really dirty, use DOM and CDATA section!
        echo <response>;
        foreach ($return as $key => $value) { echo "<$key><![CDATA[$value]]></$key>"; }
        echo </response>;
    }
  
    else
    {
        // header(Content-type: application/json);
        echo json_encode($return);
    }

XHTML Markup

 
<form action="../script.php" method="post" enctype="multipart/form-data" id="form-demo">
 
    <fieldset id="demo-fallback">
        <legend>File Upload</legend>
        <p>
            This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
            If this part is not changed, something must be wrong with your code.
        </p>
        <label for="demo-photoupload">
            Upload a Photo:
            <input type="file" name="Filedata" />
        </label>
    </fieldset>
 
    <div id="demo-status" class="hide">
        <p>
            <a href="#" id="demo-browse">Browse Files</a> |
            <a href="#" id="demo-clear">Clear List</a> |
            <a href="#" id="demo-upload">Start Upload</a>
        </p>
        <div>
            <strong class="overall-title"></strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title"></strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>
 
    <ul id="demo-list"></ul>
 
</form>

Note that the “enctype” attribute for the form specifies the content-type to use when submitting the form. The “multipart/form-data” is used when a form requires binary data, like the contents of a file, to be uploaded.

FancyUpload is a creation of Harald Kirschner and is available free under the MIT License.

 Original Source:
http://www.hektorparis.com/upload-multiple-images-at-once-using-php/