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):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:<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>
i file collegati sono i seguenti: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>
styles.css
script.js: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;
}
La pagina post_file.php è la seguente: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);
}
});
Non riesco a capire perchè non mi carica la foto dentro la cartella creata dall'utente inserendo il nome nella pagine nuovoAlbum.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);
}
?>
Qualcuno riesce a darmi una mano? Grazie
Rispondi quotando
