Upload Drag & Drop : problème avec le multi files

bigmaster
Javascript

Bonjour,

J'ai modifié le code pour essayer de maîtriser jQuery, mais j'ai quelques soucis d'incompréhension, et j'aurais aimé avoir quelques une de vos lumières pour régler mes problèmes.

Lors du multi files, les progressBar ne fonctionne pas ainsi que l'affichage des photos.

Code jQuery :
[code]
jQuery(function($){
$("#listing").sortable();
$("#listing").disableSelection();

$.event.props.push("dataTransfer");

//// Evenement Drag & Drop
$("#boxDragDrop").bind({
    "dragenter dragexit" : do_nothing,
    dragover : function(e){
            e.preventDefault();
            $("#boxDragDrop").addClass('hover');
        },
    dragleave : function(e){
            e.preventDefault();
            $("#boxDragDrop").removeClass('hover');
        },
    drop : drop
});

});

function do_nothing(e){
e.stopPropagation();
e.preventDefault();
}

function drop(e){
do_nothing(e);

console.log(e);

var files = e.dataTransfer.files;

// On vérifie que des fichiers ont bien été déposés
if(files.length>0){
    for(var i in files){
        // Si c'est bien un fichier
        if(files[i].size!=undefined) {

            var file=files[i];

            // On ajoute un listener progress sur l'objet xhr de jQuery
            xhr = jQuery.ajaxSettings.xhr();
            if(xhr.upload){
                xhr.upload.addEventListener('progress', function (e) {
                    console.log(e);
                    update_progress(e,file);
                },false);
            }
            provider=function(){ return xhr; };

            // On construit notre objet FormData
            var fd=new FormData;
            fd.append('file',file);
            fd.append('folder','drop');

            // Requete ajax pour envoyer le fichier
           $.ajax({
                url:'upload.php',
                type: 'POST',
                data: fd,
                xhr:provider,
                processData:false,
                contentType:false,
                complete:function(data){
                    $('#listing').append('<li class="dropZone" data-value="'+file.name+'"><img src="drop/'+file.name+'" /></li>');
                    $('#'+data.responseText+' .percent').html('100%');
                    $('#'+id_tmp).remove();
                    $("#boxDragDrop").removeClass('hover');
                }
           });

            // On prépare la barre de progression au démarrage
            var id_tmp=file.size;
            // On ajoute notre fichier à la liste
            $('#listing').append('<li class="dropZone" id="'+id_tmp+'"><div class="progress_bar loading" style="margin-top:25px" id="'+id_tmp+'"><div class="percent">0%</div></div></li>');
        }
    }
}

console.log(e.dataTransfer);

}

function update_progress(e,file) {

var id_tmp=file.size;

if (e.lengthComputable) {
    var percentLoaded = Math.round((e.loaded / e.total) * 100);
    if (percentLoaded <= 100) {
        $('#'+id_tmp+' .percent').css('width', percentLoaded + '%');
        $('#'+id_tmp+' .percent').html(percentLoaded + '%');
    }
}

}
[/code]

Code PHP :
[code]
<?php
$types = Array('image/png', 'image/gif', 'image/jpeg');

$folder = (isset($_POST['folder']))?$_POST['folder']:'drop';
$folder .= '/';
$source = $_FILES['file']['tmp_name'];

switch(strtolower($_FILES['file']['type'])){
case 'image/png':
$type = 'png';
break;
case 'image/gif':
$type = 'gif';
break;
case 'image/jpeg':
$type = 'jpg';
break;
default :
$type = false;
}

if(!$type){
echo 'Format non supporté';
}else{
imageresize($source,$folder.$_FILES['file']['name'],$type,150,100,true);
$id_tmp=filesize($source);
echo $id_tmp;
//$o->content = '<img src="img/'.$h['x-file-name'].'"/>';
}
//echo json_encode($o);

function imageresize($source, $destination, $type,$width = 0, $height = 0, $crop = false, $quality = 80) {
$quality = $quality ? $quality : 80;
//$image = imagecreatefromstring($source);

switch($type){
    case 'png':
        $image = imagecreatefrompng($source);
        break;
    case 'gif':
        $image = imagecreatefromgif($source);
        break;
    case 'jpg':
        $image = imagecreatefromjpeg($source);
        break;
}

if ($image) {
    // Get dimensions
    $w = imagesx($image);
    $h = imagesy($image);
    if (($width && $w > $width) || ($height && $h > $height)) {
        $ratio = $w / $h;
        if (($ratio >= 1 || $height == 0) && $width && !$crop) {
            $new_height = $width / $ratio;
            $new_width = $width;
        } elseif ($crop && $ratio <= ($width / $height)) {
            $new_height = $width / $ratio;
            $new_width = $width;
        } else {
            $new_width = $height * $ratio;
            $new_height = $height;
        }
    } else {
        $new_width = $w;
        $new_height = $h;
    }
    $x_mid = $new_width * .5;  //horizontal middle
    $y_mid = $new_height * .5; //vertical middle
    // Resample
    error_log('height: '.$new_height.' - width: '.$new_width);
    $new = imagecreatetruecolor(round($new_width), round($new_height));
    imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
    // Crop
    if ($crop) {
        $crop = imagecreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);
        imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
        //($y_mid - ($height * .5))
    }
    // Output
    // Enable interlancing [for progressive JPEG]
    imageinterlace($crop ? $crop : $new, true);

    $dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
    if ($dext == '') {
        $dext = $ext;
        $destination .= '.' . $ext;
    }
    switch ($dext) {
        case 'jpeg':
        case 'jpg':
            imagejpeg($crop ? $crop : $new, $destination, $quality);
            break;
        case 'png':
            $pngQuality = ($quality - 100) / 11.111111;
            $pngQuality = round(abs($pngQuality));
            imagepng($crop ? $crop : $new, $destination, $pngQuality);
            break;
        case 'gif':
            imagegif($crop ? $crop : $new, $destination);
            break;
    }
    @imagedestroy($image);
    @imagedestroy($new);
    @imagedestroy($crop);
}

}

?>
[/code]

Code HTML :
[code]
<body class="metal">
<header>
<div class="left">
<h1>Tutorial</h1>
</div>
<div class="right">
<h5><?php echo date("d/m/Y");?></h5>
</div>
</header>
<div id="content" class="nosidebar">
<h1>Tutorial</h1>
<article>
<div class="title">Drag & Drop</div>
<div class="content">
<div id="boxDragDrop">
<ul id="listing">
<?php foreach(glob('drop/*') as $file) : ?>
<li class="dropZone" data-value="<?php echo end(explode('/',$file)); ?>">
<img src="<?php echo $file; ?>"/>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</article>
</div>
<footer>
</footer>
</body>
[/code]

Bien à vous et un très grand merci

Aucune réponse