Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts

    PHP/jQuery problem with upload script

    Hi,

    I'm having some fun with a PHP/jQuery upload script i've found.
    The script actually works just fine, but it can only upload to one specific folder. I want it to be able to upload to a folder that is defined in the adress (like: www.domain.com/index.php?dir=folder_name).

    My problem is that i don't know how to transfer $_GET['dir'] through the jQuery function and on to the PHP file (to the variable $uploaddir), that executes the actual upload.

    Here you can see the script:


    ------------------------------------------------------------------------

    upload.html:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/swfupload/swfupload.js"></script>
    <script type="text/javascript" src="js/jquery.swfupload.js"></script>
    <script type="text/javascript">

    $(function(){
        $('#swfupload-control').swfupload({
            upload_url: "upload-file.php",
            file_post_name: 'uploadfile',
            file_size_limit : "5120",
            file_types : "*.jpg;*.png;*.gif",
            file_types_description : "Image files",
            file_upload_limit : 50,
            flash_url : "js/swfupload/swfupload.swf",
            button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
            button_width : 114,
            button_height : 29,
            button_placeholder : $('#button')[0],
            debug: false
        })
            .bind('fileQueued', function(event, file){
                var listitem='<li id="'+file.id+'" >'+
                    'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
                    '<div class="progressbar" ><div class="progress" ></div></div>'+
                    '<p class="status" >Pending</p>'+
                    '<span class="cancel" > </span>'+
                    '</li>';
                $('#log').append(listitem);
                $('li#'+file.id+' .cancel').bind('click', function(){
                    var swfu = $.swfupload.getInstance('#swfupload-control');
                    swfu.cancelUpload(file.id);
                    $('li#'+file.id).slideUp('fast');
                });
                // start the upload since it's queued
                $(this).swfupload('startUpload');
            })
            .bind('fileQueueError', function(event, file, errorCode, message){
                alert('Size of the file '+file.name+' is greater than limit');
            })
            .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
                $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
            })
            .bind('uploadStart', function(event, file){
                $('#log li#'+file.id).find('p.status').text('Uploading...');
                $('#log li#'+file.id).find('span.progressvalue').text('0%');
                $('#log li#'+file.id).find('span.cancel').hide();
            })
            .bind('uploadProgress', function(event, file, bytesLoaded){
                //Show Progress
                var percentage=Math.round((bytesLoaded/file.size)*100);
                $('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
                $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
            })
            .bind('uploadSuccess', function(event, file, serverData){
                var item=$('#log li#'+file.id);
                item.find('div.progress').css('width', '100%');
                item.find('span.progressvalue').text('100%');
                var pathtofile='<a href="photos/'+file.name+'" target="_blank" >view »</a>';
                item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
            })
            .bind('uploadComplete', function(event, file){
                // upload has completed, try the next one in the queue
                $(this).swfupload('startUpload');
            })
        
    });    

    </script>

    </head>
    <body>

        <h3>» Picture upload</h3>
        
    <div id="swfupload-control">
        <input type="button" id="button" />
        <p id="queuestatus" ></p>
        <ol id="log"></ol>
    </div>

    </body>
    </html> 


    ------------------------------------------------------------------------

    upload-file.php

    PHP Code:
    <?php
    $uploaddir 
    './photos/'
    $file $uploaddir basename($_FILES['uploadfile']['name']); 
    $size=$_FILES['uploadfile']['size'];
    if(
    $size>5242880)
    {
        echo 
    "error file size > 5 MB";
        
    unlink($_FILES['uploadfile']['tmp_name']);
        exit;
    }
    if (
    move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { 
      echo 
    "success"
    } else {
        echo 
    "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)";
    }
    ?>
    -------------------


    Thanks in advance,

    Morten
    Last edited by Inigoesdr; 12-17-2010 at 02:17 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    upload-file.php:

    PHP Code:
    <?php
    //$uploaddir = './photos/'; //skip this static setting and set it dynamically instead
    $uploaddir './'.$_GET['dir'].'/';
    $file $uploaddir basename($_FILES['uploadfile']['name']); 
    $size=$_FILES['uploadfile']['size'];
    if(
    $size>5242880)
    {
    echo 
    "error file size > 5 MB";
    unlink($_FILES['uploadfile']['tmp_name']);
    exit;
    }
    if (
    move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { 
    echo 
    "success"
    } else {
    echo 
    "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)";
    }
    ?>

    This is the general idea once you get the variable set in your form and submit it to your PHP script.

    Now it must be said that a great deal of input validation of the directory requested must be done on the server side to prevent directory traversing or other abuses by unfriendly users entering strings of text designed to upload a file to a directory that you didn't intend to make available to them for upload.

    I haven't reviewed your script in full, but you should also make sure that a user cannot upload a php file to your server and then execute it as that would be a major security hole. Same goes for pretty much any type of file OTHER than an image file. Do this check on the server side because the client side (javascript) checks can be easily defeated (or a user can simply make their own page somewhere else and submit their form to your upload script). The point is, never trust your users and ALWAYS validate your data on the server side. Javascript validation is for user convenience only - not for security.

    Anyway, the code above is the very shortest route to get the PHP doing what you have asked about. It's not secure until after you have cleansed the input, but it's the general idea of what you need to do.

    Are you having trouble with the javascript as well?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •