• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Uploadify with album select

One of the best uploading scripts that I've found is uploadify, which you can get here : It allows you to select and upload multiple files. We will use this script with select box to choose to which album to upload photos. We will use uploadify onSelect event to get selected index of drop down box and scriptData to pass it to file hanlder.

So what we need is drop down menu to choose album:

<select name='album' id='album'>
<option value='1'>Summer photos</option>
<option value='2'>Autumn photos</option>
<option value='3'>Winter photos</option>
<option value='4'>Spring photos</option>

And then default uploadify implementation with some adjusments:

<link href="/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/jquery.uploadify.v2.1.0.min.js"></script>
<div id="fileQueue"></div><p></p>
<input type="file" name="uploadify" id="uploadify" />
<a href="javascript:jQuery('#uploadify').uploadifyUpload();">Upload</a> 
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">Clear</a>
<script type="text/javascript">
jQuery(document).ready(function() {
        //uploadify script
        'uploader'       : '/uploadify/uploadify.swf',
        //file handler
        'script'         : '/uploadify/uploadify.php',
        //image for cancel button
        'cancelImg'      : '/images/cancel.png',
        //where to upload
        'folder'         : '/uploads',
        //other attributes
        'queueID'        : 'fileQueue',
        'displayData'    : 'speed',
        'wmode'          : 'transparent',
        'width'          : 130,
        'queueID'        : 'fileQueue',
        'fileDesc'       : 'Image Files',
        'fileExt'        : '*.jpg;*.jpeg;*.gif;*.png',
        'multi'          : true,
        //onSelect event where we will get albumID
        'onSelect': function(event, data) {
            selected_index = document.getElementById("album").selectedIndex;
            var albumID = document.getElementById("album").options[selected_index].value;
            jQuery("#uploadify").uploadifySettings('scriptData', {'albumID' : albumID});

And of course uploadify.php where we will handle file uploads:

if (!empty($_FILES)) {
    $con = mysql_connect("host", "user", "pass");
    //folder wher e to save
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/';
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
    //move file
    // adding record to database with selected albumID
    $query = "insert into photos set photo_path = '".$targetFile."',".
                                   " albumID = '".$_POST['albumID']."'";
    mysql_query($query, $con);
    //needed for uploadify to work correctly
    echo "1";

You may also be interested in:

Powered by

blog comments powered by Disqus