jquery and html drag and drop загрузить фото

Question

Я использую этот сценарий загрузки jquery и html изображений без проблем, сценарий позволяет пользователю перетаскивать изображение в целевую область и выгружать его, затем загружает изображение и отображает его.

моя проблема заключается в том, что его в настоящее время перестал работать и я не могу выяснить, почему (я havn't изменил все, что я знаю)

также его никогда не работал в Firefox, пользователи не могу загрузить, выбрав файл или перетащить и падение. поэтому мой другой вопрос в том, почему он перестает работать, а также почему он полностью не отвечает в firefox, может быть, это всего лишь одна строка кода, использующая, что можно изменить, я действительно не знаю, но я надеюсь, что у кого-то могут быть некоторые идеи, спасибо.

index.php:

<!-- jquery --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
     <div id="devcontainer"> 
      <!-- development area --> 
      <script src="droparea.js"></script> 
      <style> 
       .droparea { 
        position:relative; 
        text-align: center; 
        width:180px; 
        height:190px; 
        margin-left:-5px; 
       } 
       .multiple { 
        position:relative; 
        height: 20px; 
       } 
       .droparea div, .droparea input, .multiple div, .multiple input { 
        position: absolute; 
        top:0; 
        width: 180px; 
        height: 190px; 
       } 
       .droparea input, .multiple input { 
        cursor: pointer; 
        opacity: 0; 
       } 

       .droparea { 
        border: none; 
        color:#666; 
        background-color:#FFFFFF; 
        font-size: 0px; 
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif; 
    width:180px; 
        height:190px; 
       } 

       .instructions { 
        padding-top:90px; 
        padding-left:0px; 
        color:#666; 
        text-align:center; 
        font-size: 14px; 
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif; 
    height:180px; 
    width:190px; 

       } 


       .droparea .progress, .multiple .progress { 
        position:absolute; 
        bottom: 0; 
        width: 180px; 
        height: 190px; 
        color: #fff; 
        background-image:url(../../assets/img/effects/wait.jpg) 


       } 
       .multiple .progress { 
        width: 180px; 
        height: 190px; 
       } 


       #areas { float: left; width: 180px; height:190px;} 
       div.spot { 
        float: left; 
        margin-left: -4px; 
        margin-top:-4px; 

       } 
       .thumb { 
        float: left; 
        margin:0 0px 0px 0; 
        width: 180px; 
        min-height: 190px; 
       } 
       .desc { 
        float:left; 
        width: 180px; 
        height:190px; 
       } 
       .signature a { color:#555; text-decoration:none; } 
       .signature img { margin-right:0px; vertical-align: middle; } 
       input[type=text], textarea { 
        margin-bottom: 10px; 
        padding: 0px; 
        width: 180px; 
        height: 190px; 
        border: 1px solid #bbb; 
       } 
       textarea { 
        height: 58px; 
       } 
       input[type=submit] { 
        float: right; 
        margin-right: 20px; 
        padding: 5px 25px; 
        color: #111; 
        border: 1px solid #666; 
        background: #888; 
        width:180px; 
        height:190px; 
       } 
       h3 { clear: both; padding:5px 0; } 
       #sampleform { width: 180px; width:190px; } 
      </style> 

      <div id="areas"> 

       <input type="file" class="droparea spot" name="xfile" data-post="upload.php" data-width="180" data-height="190" data-crop="true"/> 


       <form id="sampleform" action="post.php" method="post"> 

       </form> 
       <script> 
        $('#sampleform').submit(function(e){ 
         e.preventDefault(); 
         $.ajax({ 
          url:$(this).attr('action'), 
          type:'post', 
          data:$(this).serialize(), 
          dataType:'json', 
          success:function(r){ 
           $('#form-result').append(
           '<div><b>Title: </b>'+r.title+'</div>' 
           ,'<div><b>Description: </b>'+r.description+'</div>' 
           ,'<div><b>Image/File: </b>' 
            +'<a href="'+ r.url +'" target="_blank">'+ r.url +'</a>' 
            +'</div>' 
           ); 
          } 
         }); 
       }); 
       </script> 
      </div> 

      <script> 
      // Calling jQuery "droparea" plugin 
      $('.droparea').droparea({ 
       'init' : function(result){ 
        //console.log('custom init',result); 
       }, 
       'start' : function(area){ 
        area.find('.error').remove(); 
       }, 
       'error' : function(result, input, area){ 
        $('<div class="error">').html(result.error).prependTo(area); 
        return 0; 
        //console.log('custom error',result.error); 
       }, 
       'complete' : function(result, file, input, area){ 
        if((/image/i).test(file.type)){ 
         area.find('img').remove(); 
         //area.data('value',result.filename); 
         area.append($('<img>',{'src': result.path + result.filename + '?' + Math.random()})); 
        } 
        //console.log('custom complete',result); 
       } 
      }); 
      </script> 

      <!-- /development area --> 
     </div> 

post.php:

<?php 

// LOG 
$log = '=== ' . @date('Y-m-d H:i:s') . ' ===============================' . "\n" 
     . 'FILES:' . print_r($_FILES, 1) . "\n" 
     . 'POST:' . print_r($_POST, 1) . "\n"; 
$fp = fopen('post-log.txt', 'a'); 
fwrite($fp, $log); 
fclose($fp); 


// Result object 
$r = new stdClass(); 
// Result content type 
header('content-type: application/json'); 


$data = $_POST['thumbnail']; 
unset($_POST['thumbnail']); 

if($data){ 


    // Uploading folder 
    $folder = '../'. '../'. 'data/'. 'photos/'. $_SESSION['user_id'] . '/'; 
    if (!is_dir($folder)) 
     mkdir($folder); 

    // If specifics folder 
    $folder .= $_POST['folder'] ? $_POST['folder'] . '/' : ''; 
    if (!is_dir($folder)) 
     mkdir($folder); 


    $filename = $_POST['value'] ? $_POST['value'] : 
      $folder . sha1(@microtime() . '-' . $_POST['_default']) . '.jpg'; 


    $data = split(',', $data); 
    file_put_contents($filename, base64_decode($data[1])); 

} 
die(json_encode(array_merge(array('url' => $filename), $_POST))); 

?> 

upload.php:

<?php 
session_start() 
?> 
<? 


// LOG 
$log = '=== ' . @date('Y-m-d H:i:s') . ' ===============================' . "\n" 
     . 'FILES:' . print_r($_FILES, 1) . "\n" 
     . 'POST:' . print_r($_POST, 1) . "\n"; 
$fp = fopen('upload-log.txt', 'a'); 
fwrite($fp, $log); 
fclose($fp); 


// Result object 
$r = new stdClass(); 
// Result content type 
header('content-type: application/json'); 


// Maximum file size 
$maxsize = 10; //Mb 
// File size control 
if ($_FILES['xfile']['size'] > ($maxsize * 1048576)) { 
    $r->error = "Max file size: $maxsize Kb"; 
} 


// Uploading folder 
$folder = '../'. '../'. 'data/'. 'photos/'. $_SESSION['user_id'] . '/'; 
if (!is_dir($folder)) 
    mkdir($folder); 

// If specifics folder 
$folder .= $_POST['folder'] ? $_POST['folder'] . '/' : ''; 
if (!is_dir($folder)) 
    mkdir($folder); 

// PASS USER_ID HERE 
$folder2 = '../'. '../'. 'data/'. 'photos/'. $_SESSION['user_id'] . '/'; 
if (!is_dir($folder2)) 
    mkdir($folder2); 

// New directory with 'files/USER_SESSION_ID/' 
$folder = $newDir . $folder2; 


// If the file is an image 
if (preg_match('/image/i', $_FILES['xfile']['type'])) { 

    $filename = $_POST['value'] ? $_POST['value'] : 
      $folder . '_default.jpg'; 
} else { 

    $tld = split(',', $_FILES['xfile']['name']); 
    $tld = $tld[count($tld) - 1]; 
    $filename = $_POST['value'] ? $_POST['value'] : 
      $folder . sha1(@microtime() . '-' . $_FILES['xfile']['name']) . $tld; 
} 


// Supporting image file types 
$types = Array('image/png', 'image/gif', 'image/jpeg'); 
// File type control 
if (in_array($_FILES['xfile']['type'], $types)) { 
    // Create an unique file name  
    // Uploaded file source 
    $source = file_get_contents($_FILES["xfile"]["tmp_name"]); 
    // Image resize 
    imageresize($source, $filename, $_POST['width'], $_POST['height'], $_POST['crop'], $_POST['quality']); 
} else 
// If the file is not an image 
if (in_array($_FILES['xfile']['type'], $types)) 
    move_uploaded_file($_FILES["xfile"]["tmp_name"], $filename); 



// File path 
$path = str_replace('upload.php', '', $_SERVER['SCRIPT_NAME']); 

// Result data 
$r->filename = $filename; 
$r->path = $path; 
$r->img = '<img src="' . $path . $filename . '" alt="image" />'; 

// Return to JSON 
echo json_encode($r); 

// Image resize function with php + gd2 lib 
function imageresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 100) { 
    $quality = $quality ? $quality : 100; 
    $image = imagecreatefromstring($source); 
    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': 
      $jpgQuality = ($quality - 100)/11.111111; 
      $jpegQuality = ($quality - 100)/11.111111; 
       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); 
    } 
} 


?> 

Answer 1

Попробуйте использовать более современную версию JQuery. Вам не нужно идти до 1.9, но вы должны хотя бы попытаться поднять до 1.7.2. Я рекомендую вам попробовать подняться до 1.8.2, но 1.7.2 должно быть достаточно. Я даже не думаю, что 1.5.2 поддерживал перетаскивание, но я мог ошибаться.

Изменить вторую строку:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 

UPDATE

Извините, я забыл, что вы также должны ссылаться на JQuery UI. Проверьте Draggable API Reference от jQuery, а также на этом jQuery Draggable Tutorial.