Salve ho un problema. Vorrei riuscire a creare un sistema per caricare delle foto in cartelle utilizzando il drag and drop dell'html5.
Ho il seguente codice per creare un nuovo album (nuovoAlbum.php):
Codice PHP:
<html>
<head>
<title></title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
</head>
<?php
$nCartella = $_GET["nome"];
?>
<body>
<form name="form1" method="get" action="index.php">
  <span id="sprytextfield1">
  <label for="nome">Nome Album </label>
  <input type="text" name="nome" id="nome">
  

  <span class="textfieldRequiredMsg">Si prega di inserire il nome dell'album e premere invio.</span></span>
</form>
[url="../scegliCategoria.php"]Torna alle Categorie[/url]

[url="../../index.php"]Torna al sito[/url]
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>
</body>

</html>
Questa è la pagina index.php dove creo la cartella e vorrei inserire le foto messe nel drag and drop dentro la cartella scritta dall'utente nella pagina "nuovoAlbum.php":


Codice PHP:
<?php
     //seleziono dove mettere le nuove cartelle
    chdir("./");
    opendir(".");
    $nCartella = $_GET["nome"];
    mkdir($nCartella,"0777");
    echo "La cartella " . $nCartella . " e' stata creata!";
?>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        
        <link rel="stylesheet" href="./assets/css/styles.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <div id="dropbox">
          <span class="message">Trascina le immagini per caricarle nell'album 
</span>
        </div>
        
        
        <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
        
        
        <script src="./assets/js/jquery.filedrop.js"></script>
        
        
        <script src="./assets/js/script.js"></script>


[url="./nuovoAlbum.php"]Torna per creare un nuovo Album[/url]

[url="../scegliCategoria.php"]Torna alla scelta delle categorie[/url]

    </body>
</html>
i file collegati sono i seguenti:
styles.css
Codice PHP:
*{
    margin:0;
    padding:0;
}



/*-------------------------
    General Styles
--------------------------*/



html{
    background:url('../img/background_tile_2.jpg');
    min-height:100%;
    position:relative;
    
}

body{
    color:#fff;
    min-height:600px;
    font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    color:#54a6de;
}

a:hover{
    text-decoration:underline;
}

header, footer{
    display:block;
}



/*-------------------------
    Header Styles
--------------------------*/



header{
    background:url('../img/background_tile_1.jpg');
    padding:75px;
    position: relative;
}

header:before,
#dropbox:before{
    display: block;
    content:'';
    height:4px;
    width:100%;
    background:url('../img/blue_line.jpg');
    position: absolute;
    top:0;
    left:0;
    box-shadow:0 2px 2px rgba(0,0,0,0.4);
}


h1{
    background:url('../img/logo.jpg') no-repeat top center;
    height:92px;
    overflow: hidden;
    text-indent: -99999px;
    text-align: center;
}



/*-------------------------
    Dropbox Element
--------------------------*/



#dropbox{
    background:url('../img/background_tile_3.jpg');
    
    border-radius:3px;
    position: relative;
    margin:80px auto 90px;
    min-height: 290px;
    overflow: hidden;
    padding-bottom: 40px;
    width: 990px;
    
    box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}


#dropbox .message{
    font-size: 11px;
    text-align: center;
    padding-top:160px;
    display: block;
}

#dropbox .message i{
    color:#ccc;
    font-size:10px;
}

#dropbox:before{
    border-radius:3px 3px 0 0;
}



/*-------------------------
    Image Previews
--------------------------*/



#dropbox .preview{
    width:245px;
    height: 215px;
    float:left;
    margin: 55px 0 0 60px;
    position: relative;
    text-align: center;
}

#dropbox .preview img{
    max-width: 240px;
    max-height:180px;
    border:3px solid #fff;
    display: block;
    
    box-shadow:0 0 2px #000;
}

#dropbox .imageHolder{
    display: inline-block;
    position:relative;
}

#dropbox .uploaded{
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);
    display: none;
}

#dropbox .preview.done .uploaded{
    display: block;
}



/*-------------------------
    Progress Bars
--------------------------*/



#dropbox .progressHolder{
    position: absolute;
    background-color:#252f38;
    height:12px;
    width:100%;
    left:0;
    bottom: 0;
    
    box-shadow:0 0 2px #000;
}

#dropbox .progress{
    background-color:#2586d0;
    position: absolute;
    height:100%;
    left:0;
    width:0;
    
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;
    
    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}

#dropbox .preview.done .progress{
    width:100% !important;
}



/*----------------------------
    The Footer
-----------------------------*/



footer{
    display:block;
    background-color: #151517;
    
    position:fixed;
    width:100%;
    height:70px;
    bottom:0;
    left:0;
    z-index: 100000;
    
    box-shadow: 0 -1px 2px #171717;
    -webkit-box-shadow: 0 -1px 2px #171717;
    -moz-box-shadow: 0 -1px 2px #171717;
}

footer h2{
    font-size:20px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width: 540px;
    color:#eee;
}

footer a.tzine,a.tzine:visited{
    background:url("../img/tzine.png") no-repeat right top;
    border:none;
    text-decoration:none;
    color:#FCFCFC;
    font-size:12px;
    height:70px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
    width:290px;
} 
script.js:
Codice PHP:
$(function(){
    
    var dropbox = $('#dropbox'),
        message = $('.message', dropbox);
    
    dropbox.filedrop({
        // The name of the $_FILES entry:
        paramname:'pic',
        
        maxfiles: 200,
        maxfilesize: 10,
        url: 'post_file.php',
        
        uploadFinished:function(i,file,response){
            $.data(file).addClass('done');
            // response is the JSON object that post_file.php returns
        },
        
        error: function(err, file) {
            switch(err) {
                case 'BrowserNotSupported':
                    showMessage('Your browser does not support HTML5 file uploads!');
                    break;
                case 'TooManyFiles':
                    alert('Too many files! Please select 5 at most! (configurable)');
                    break;
                case 'FileTooLarge':
                    alert(file.name+' is too large! Please upload files up to 2mb (configurable).');
                    break;
                default:
                    break;
            }
        },
        
        // Called before each upload is started
        beforeEach: function(file){
            if(!file.type.match(/^image\//)){
                alert('Only images are allowed!');
                
                // Returning false will cause the
                // file to be rejected
                return false;
            }
        },
        
        uploadStarted:function(i, file, len){
            createImage(file);
        },
        
        progressUpdated: function(i, file, progress) {
            $.data(file).find('.progress').width(progress);
        }
         
    });
    
    var template = '<div class="preview">'+
                        '<span class="imageHolder">'+
                            '<img />'+
                            '<span class="uploaded"></span>'+
                        '</span>'+
                        '<div class="progressHolder">'+
                            '<div class="progress"></div>'+
                        '</div>'+
                    '</div>'; 
    
    
    function createImage(file){

        var preview = $(template), 
            image = $('img', preview);
            
        var reader = new FileReader();
        
        image.width = 100;
        image.height = 100;
        
        reader.onload = function(e){
            
            // e.target.result holds the DataURL which
            // can be used as a source of the image:
            
            image.attr('src',e.target.result);
        };
        
        // Reading the file as a DataURL. When finished,
        // this will trigger the onload function above:
        reader.readAsDataURL(file);
        
        message.hide();
        preview.appendTo(dropbox);
        
        // Associating a preview container
        // with the file, using jQuery's $.data():
        
        $.data(file,preview);
    }

    function showMessage(msg){
        message.html(msg);
    }

}); 
La pagina post_file.php è la seguente:
Codice PHP:
<?php
// If you want to ignore the uploaded files, 
// set $demo_mode to true;
$demo_mode = false;
$upload_dir = './$nCartella/';
$allowed_ext = array('jpg','jpeg','png','gif');


if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    exit_status('Error! Wrong HTTP method!');
}


if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){
    
    $pic = $_FILES['pic'];

    if(!in_array(get_extension($pic['name']),$allowed_ext)){
        exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
    }    

    if($demo_mode){
        
        // File uploads are ignored. We only log them.
        
        $line = implode('        ', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));
        file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);
        
        exit_status('Uploads are ignored in demo mode.');
    }
    
    
    // Move the uploaded file from the temporary 
    // directory to the uploads folder:
    
    if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
        exit_status('File was uploaded successfuly!');
    }
    
}

exit_status('Something went wrong with your upload!');


// Helper functions

function exit_status($str){
    echo json_encode(array('status'=>$str));
    exit;
}

function get_extension($file_name){
    $ext = explode('.', $file_name);
    $ext = array_pop($ext);
    return strtolower($ext);
}
?>
Non riesco a capire perchè non mi carica la foto dentro la cartella creata dall'utente inserendo il nome nella pagine nuovoAlbum.
Qualcuno riesce a darmi una mano? Grazie