Question

我一直在使用这个jquery和html图片上传脚本没有任何问题，该脚本允许用户将图像拖到目标区域并将其删除，然后上传图像并显示它。

我的问题是它现在停止工作，我无法找到原因（我没有改变我所知道的任何事情）

它也从未在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>

的更新

抱歉，我忘了您还需要引用jQuery UI。查看jQuery中的Draggable API Reference以及此jQuery Draggable Tutorial。

jquery和html拖放图片上传

1 个答案: