swfupload+imgareaselect打造头像图片在线编辑无刷新上传

http://www.cnblogs.com/aluode/archive/2012/11/01/2749289.html

正在做一个项目，需要一个会员头像在线编辑并上传的功能，百度了下大多是基于flash去实现在线编辑的，而且上传完必须刷新下，于是我想到了imgareaselect

首先你得去下载Jquery文件1.4版本以上，imgareaselect插件，swfupload插件，百度下就知道哪里下了。

目录结构：

Demo程序包下载：IconUpload

1、imgareaselect.php

<?php
session_start();
$ssession_id = session_id();
$icon = './upload/icon.jpg';
$icon_min = './upload/icon_min.jpg';
include './imgareaselect.html';
?>

2、imgareaselect.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>

<link rel="stylesheet" type="text/css" href="./imgareaselect/imgareaselect-default.css" />
<script type="text/javascript" src="./imgareaselect/jquery.imgareaselect.min.js"></script>

<link href="./swfupload/swfupload.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./swfupload/swfupload.js"></script>
<script type="text/javascript" src="./swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="./swfupload/fileprogress.js"></script>
<script type="text/javascript" src="./swfupload/handlers.js"></script>
<script type="text/javascript">
<!--
var upload1;
window.onload = function() {
upload1 = new SWFUpload({
    // Backend Settings
    upload_url: "./icon_upload.php",
    post_params: {"PHPSESSID" : "<?php echo $ssession_id;?>"},

    // File Upload Settings
    file_size_limit : "300",    // 300kb
    file_types : "*.jpg;*.jpeg;*.png;*.gif",
    file_types_description : "jpg,jpeg,png,gif",
    file_upload_limit : "1",
    file_queue_limit : "1",

    // Event Handler Settings (all my handlers are in the Handler.js file)
    file_dialog_start_handler : fileDialogStart,
    file_queued_handler : fileQueued,
    file_queue_error_handler : fileQueueError,
    file_dialog_complete_handler : fileDialogComplete,
    upload_start_handler : uploadStart,
    upload_progress_handler : uploadProgress,
    upload_error_handler : uploadError,
    upload_success_handler : uploadSuccess,
    upload_complete_handler : uploadComplete,

    // Button Settings
    button_image_url : "./swfupload/XPButtonUploadText_61x22.png",
    button_placeholder_id : "spanButtonPlaceholder1",
    button_width: 61,
    button_height: 22,

    // Flash Settings
    flash_url : "./swfupload/swfupload.swf",


    custom_settings : {
        progressTarget : "fsUploadProgress1",
        cancelButtonId : "btnCancel1"
    },

    // Debug Settings
    debug: false
});
$('#icon').imgAreaSelect({
    x1: 100, y1: 100, x2: 200, y2: 200,
    aspectRatio: '1:1',
    handles: true,
    fadeSpeed: 200,
    onSelectChange: preview
});
}


function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;
    $('#preview img').css({
        width: Math.round(scaleX * $('#icon').width()),
        height: Math.round(scaleY * $('#icon').height()),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}

function save_img(){
    var icon_min = $('#selectbanner').attr('src');
    $.post("./imgareaselect_save.php",  {
        'x':$('#x1').val(),
        'y':$('#y1').val(),
        'w':$('#w').val(),
        'h':$('#h').val()
        },
        function(r){
            //把裁剪后图片加载到原处
            if(r == '1'){
                alert('保存头像成功！');
                var dateTime=new Date();
                $('#selectbanner').attr('src',icon_min+'?'+dateTime.getMinutes()+dateTime.getSeconds());
            }
        }
    );
}
//-->
</script>
<div align="center">
<table align="center">
    <tr>
        <td>
            <div><img id="icon" src="<?php echo $icon;?>" style="width: 400px; "/></div>
        </td>
        <td>
            <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
                <img id="icon_min" src="<?php echo $icon;?>" style="width: 100px; height: 100px;" />
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <br>
            你当前的头像LOGO：
            <br>
            <div><img id="selectbanner" src="<?php echo $icon_min;?>"></div>
            <br>
            <form id="form1" action="index.php" method="post" enctype="multipart/form-data">
            <div>
                <div class="fieldset flash" id="fsUploadProgress1">
                    <span class="legend">头像上传</span>
                </div>
                <div style="padding-left: 5px;">
                    <span id="spanButtonPlaceholder1"></span>
                    <input type="button" value="开始上传" onclick="upload1.startUpload();" style="margin-left: 2px; font-size: 8pt; height: 22px;" />
                    <input id="btnCancel1" type="button" value="取消上传" onclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
                    <span style="cursor:pointer" onclick="save_img()">[保存头像]</span>
                    <br />
                </div>
            </div>
            </form>
        </td>
    </tr>
</table>





<table style="display:none">
    <tr>
      <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
          <td style="width: 30%;"><input type="text" id="x1" value="100" /></td>
          <td style="width: 20%;"><b>Width:</b></td>
        <td><input type="text" value="100" id="w" /></td>
    </tr>
    <tr>
      <td><b>Y<sub>1</sub>:</b></td>
      <td><input type="text" id="y1" value="100" /></td>
      <td><b>Height:</b></td>
      <td><input type="text" id="h" value="100" /></td>
    </tr>
    <tr>
      <td><b>X<sub>2</sub>:</b></td>
      <td><input type="text" id="x2" value="200" /></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td><b>Y<sub>2</sub>:</b></td>
      <td><input type="text" id="y2" value="200" /></td>
      <td></td>
      <td></td>
    </tr>
</table>

</div>

3、imgareaselect_save.php

<?php
sliceBanner();
function sliceBanner(){
    $x = (int)$_POST['x'];
    $y = (int)$_POST['y'];
    $w = (int)$_POST['w'];
    $h = (int)$_POST['h'];
    $filename = trim($_POST['pic']);
    if(isset($filename)){
        $uploadBanner =  getFolder().'icon.jpg';
        /*if(!file_exists($uploadBanner)){
            $uploadBanner = './images/icon.jpg';
        }*/
        $sliceBanner =  getFolder().'icon_min.jpg';
        $src_pic = getImageHander($uploadBanner);
        if(!$src_pic){
            echo '0';exit;
        }
        $dst_pic = imagecreatetruecolor(100, 100);
        imagecopyresampled($dst_pic, $src_pic, 0, 0, $x, $y, 100, 100, $w, $h);
        imagejpeg($dst_pic, $sliceBanner);
        //chmod($sliceBanner, 0777);
        imagedestroy($src_pic);
        imagedestroy($dst_pic);
        echo '1';exit;
    }
    echo '0' ;exit;
}
function getImageHander ($url) {
    $size=@getimagesize($url);
    switch($size['mime']){
        case 'image/jpeg': $im = imagecreatefromjpeg($url);break;
        case 'image/gif' : $im = imagecreatefromgif($url);break;
        case 'image/png' : $im = imagecreatefrompng($url);break;
        default: $im=false;break;
    }
    return $im;
}
function getFolder(){
    global $user_id;
    $pathStr = './upload/';
    if ( strrchr( $pathStr , "/" ) != "/" ) {
        $pathStr .= "/";
    }
    //$pathStr .= $user_id.'/';
    if ( !file_exists( $pathStr ) ) {
        if ( !mkdir( $pathStr , 0777 , true ) ) {
            return false;
        }
    }
    return $pathStr;
}
?>

4、icon_upload.php

<?php
// Code for Session Cookie workaround
    if (isset($_POST["PHPSESSID"])) {
        session_id($_POST["PHPSESSID"]);
    } else if (isset($_GET["PHPSESSID"])) {
        session_id($_GET["PHPSESSID"]);
    }

// Check post_max_size (http://us3.php.net/manual/en/features.file-upload.php#73762)
    $POST_MAX_SIZE = ini_get('post_max_size');
    $unit = strtoupper(substr($POST_MAX_SIZE, -1));
    $multiplier = ($unit == 'M' ? 1048576 : ($unit == 'K' ? 1024 : ($unit == 'G' ? 1073741824 : 1)));

    if ((int)$_SERVER['CONTENT_LENGTH'] > $multiplier*(int)$POST_MAX_SIZE && $POST_MAX_SIZE) {
        header("HTTP/1.1 500 Internal Server Error"); // This will trigger an uploadError event in SWFUpload
        echo "POST exceeded maximum allowed size.";
        exit(0);
    }

// Settings
    $save_path = "./upload/";// The path were we will save the file (getcwd() may not be reliable and should be tested in your environment)
    if ( !file_exists( $save_path ) ) {
        if ( !mkdir( $save_path , 0777 , true ) ) {
            HandleError("can not make dir");
            exit(0);
        }
    }
    $upload_name = "Filedata";
    $max_file_size_in_bytes = 314400;                // 300k in bytes
    $extension_whitelist = array("jpg", "jpeg", "png","gif");    // Allowed file extensions
    $valid_chars_regex = '.A-Z0-9_ !@#$%^&()+={}\[\]\',~`-';                // Characters allowed in the file name (in a Regular Expression format)

// Other variables
    $MAX_FILENAME_LENGTH = 260;
    $file_name = "";
    $file_extension = "";
    $uploadErrors = array(
        0=>"There is no error, the file uploaded with success",
        1=>"The uploaded file exceeds the upload_max_filesize directive in php.ini",
        2=>"The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form",
        3=>"The uploaded file was only partially uploaded",
        4=>"No file was uploaded",
        6=>"Missing a temporary folder"
    );


// Validate the upload
    if (!isset($_FILES[$upload_name])) {
        HandleError("No upload found in \$_FILES for " . $upload_name);
        exit(0);
    } else if (isset($_FILES[$upload_name]["error"]) && $_FILES[$upload_name]["error"] != 0) {
        HandleError($uploadErrors[$_FILES[$upload_name]["error"]]);
        exit(0);
    } else if (!isset($_FILES[$upload_name]["tmp_name"]) || !@is_uploaded_file($_FILES[$upload_name]["tmp_name"])) {
        HandleError("Upload failed is_uploaded_file test.");
        exit(0);
    } else if (!isset($_FILES[$upload_name]['name'])) {
        HandleError("File has no name.");
        exit(0);
    }

// Validate the file size (Warning: the largest files supported by this code is 2GB)
    $file_size = @filesize($_FILES[$upload_name]["tmp_name"]);
    if (!$file_size || $file_size > $max_file_size_in_bytes) {
        HandleError("File exceeds the maximum allowed size");
        exit(0);
    }

    if ($file_size <= 0) {
        HandleError("File size outside allowed lower bound");
        exit(0);
    }


// Validate file extension
    $path_info = pathinfo($_FILES[$upload_name]['name']);
    $file_extension = $path_info["extension"];
    $is_valid_extension = false;
    foreach ($extension_whitelist as $extension) {
        if (strcasecmp($file_extension, $extension) == 0) {
            $is_valid_extension = true;
            break;
        }
    }
    if (!$is_valid_extension) {
        HandleError("Invalid file extension");
        exit(0);
    }
// Validate file name (for our purposes we'll just remove invalid characters)
    //$file_name = preg_replace('/[^'.$valid_chars_regex.']|\.+$/i', "", basename($_FILES[$upload_name]['name']));
    $file_name = 'base_icon.'.$file_extension;
    if (strlen($file_name) == 0 || strlen($file_name) > $MAX_FILENAME_LENGTH) {
        HandleError("Invalid file name");
        exit(0);
    }

    list($width, $height) = getimagesize($_FILES[$upload_name]["tmp_name"]);
    $percent = round($width/400,1);
    if($percent > '1'){
        $new_width = 400;
        $new_height = $height / $percent;
    }else{
        $new_width = $width;
        $new_height = $height;
    }

    // Resample
    $image_p = imagecreatetruecolor($new_width, $new_height);
    $image = getImageHander($_FILES[$upload_name]["tmp_name"]);
    imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
    imagejpeg($image_p,$save_path.'icon.jpg');
    imagedestroy($image);
    imagedestroy($image_p);

    if (!@move_uploaded_file($_FILES[$upload_name]["tmp_name"], $save_path.$file_name)) {
        HandleError("File could not be saved.");
        exit(0);
    }
    exit(0);

function getImageHander ($url) {
    $size=@getimagesize($url);
    switch($size['mime']){
        case 'image/jpg': $im = imagecreatefromjpeg($url);break;
        case 'image/jpeg': $im = imagecreatefromjpeg($url);break;
        case 'image/gif' : $im = imagecreatefromgif($url);break;
        case 'image/png' : $im = imagecreatefrompng($url);break;
        default: $im=false;break;
    }
    return $im;
}
/* Handles the error output. This error message will be sent to the uploadSuccess event handler.  The event handler
will have to check for any error messages and react as needed. */
function HandleError($message) {
    echo $message;
}
?>

5、swfupload/handlers.js 修改 uploadSuccess函数，在里面追加上传完成后的动作

function uploadSuccess(file, serverData) {
    try {
        var progress = new FileProgress(file, this.customSettings.progressTarget);
        progress.setComplete();
        progress.setStatus("上传完成");
        progress.toggleCancel(false);
        //window.top.location.reload(); //刷新重载页面
        //无刷新更新图片
        var icon = document.getElementById('icon').getAttribute("src");
        var dateTime=new Date();
        document.getElementById('icon').setAttribute("src",icon+'?'+dateTime.getMinutes()+dateTime.getSeconds());
        document.getElementById('icon_min').setAttribute("src",icon+'?'+dateTime.getMinutes()+dateTime.getSeconds());
    } catch (ex) {
        this.debug(ex);
    }
}