WebEnh

2016-12-27 15:54

今天介绍的这款flash上传头像功能非常强大，支持php，asp，jsp，asp.net 调用头像剪裁，预览组件插件。本组件需要安装Flash Player后才可使用，请从http://dl.pconline.com.cn/html_2/1/114/id=8122&pn=0.html" target='_blank'>这里下载安装。

程序员，你不是一个人；网站开发QQ群：35291327 在线充值，或联系QQ416148489直接充值

分类：图片代码 > 缩略图难易：中级

查看演示下载资源： 3229 次下载资源下载积分： 26 积分

该flash头像上传插件受众多开发人员好评的优秀，具有以下优势：

<ul class="ul_demo"> <li>上传并预览，用户可以任意选择区域，支持头像旋转</li> <li>支持上传成功，js 回调函数</li> <li>无论图片过大还是过小，都可以按照固定大小显示</li> <li>支持亮度，对比度，饱和度修饰</li> <li>支持头像拍照保存</li> <li>支持php，asp，jsp，asp.net 调用</li> <li>兼容性好，任何浏览器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用 </li>

HTML

首先我们在页面上定义了一个隐藏的上传按钮。为什么要隐藏呢？这是为了保证图片成功加载到编辑面板。

<button type="button" id="upload" style="display:none;margin-top:8px;"> 
  swf外定义的上传按钮，点击可执行上传保存操作 
</button>

接着我们要载入jQuery库和flash需要的组件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="scripts/swfobject.js"></script> 
<script type="text/javascript" src="scripts/fullAvatarEditor.js"></script>

最后我们看下头像上传的调用方法，说明都已经写在以下代码里。

swfobject.addDomLoadEvent(function() { 
    //以下两行代码正式环境下请删除 
    if (location.href.indexOf('http://') == -1) alert('请于WEB服务器环境中查看、测试！\n\n既 http://*/simpleDemo.html\n\n而不是本地路径 file:///*/simpleDemo.html的方式'); 
    var swf = new fullAvatarEditor("fullAvatarEditor.swf", "expressInstall.swf", "swfContainer", { 
        id: 'swf', 
        upload_url: 'upload.php?userid=999&username=looselive',//上传头像地址和参数 
        method: 'post',//传递到上传接口中的查询参数的提交方式。更改该值时，请注意更改上传接口中的查询参数的接收方式 
        src_upload: 2,//是否上传原图片的选项，有以下值：0-不上传；1-上传；2-显示复选框由用户选择 
        avatar_box_border_width: 0, 
        avatar_sizes: '100*100|50*50|32*32', 
        avatar_sizes_desc: '100*100像素|50*50像素|32*32像素' 
    }, 
    function(msg) { 
        switch (msg.code) { 
        case 1: 
            //alert("页面成功加载了组件！"); 
            break; 
        case 2: 
            //alert("已成功加载图片到编辑面板。"); 
            document.getElementById("upload").style.display = "inline"; 
            break; 
        case 3: 
            if (msg.type == 0) { 
                alert("摄像头已准备就绪且用户已允许使用。"); 
            } else if (msg.type == 1) { 
                alert("摄像头已准备就绪但用户未允许使用！"); 
            } else { 
                alert("摄像头被占用！"); 
            } 
            break; 
        case 5: 
            if (msg.type == 0) { 
                if (msg.content.sourceUrl) { 
                    alert("原图已成功保存至服务器，url为：\n" + 　msg.content.sourceUrl + "\n\n" + "头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n\n") + "\n\n传递的userid=" + msg.content.userid + "&username=" + msg.content.username); 
                } else { 
                    alert("头像已成功保存至服务器，url为：\n" + msg.content.avatarUrls.join("\n\n") + "\n\n传递的userid=" + msg.content.userid + "&username=" + msg.content.username); 
                } 
            } 
            break; 
        } 
    }); 
    document.getElementById("upload").onclick = function() { 
        swf.call("upload"); 
    }; 
});

PHP

本文以PHP上传为例，我们把头像上传到upload文件夹，并且上传后生成了三张头像缩略图。

$dir = "upload"; 
// 取服务器时间+8位随机码作为部分文件名，确保文件名无重复。 
$filename = date("YmdHis") . '_' . floor(microtime() * 1000) . '_' . createRandomCode(8); 
// 处理原始图片开始------------------------------------------------------------------------> 
//默认的 file 域名称是__source，可在插件配置参数中自定义。参数名：src_field_name 
$source_pic = $_FILES["__source"]; 
//如果在插件中定义可以上传原始图片的话，可在此处理，否则可以忽略。 
if ($source_pic) { 
    if ($source_pic['error'] > 0) { 
        $msg .= $source_pic['error']; 
    } else { 
        //原始图片的文件名，如果是本地或网络图片为原始文件名、如果是摄像头拍照则为 *FromWebcam.jpg 
        $sourceFileName = $source_pic["name"]; 
        //原始文件的扩展名(不包含“.”) 
        $sourceExtendName = substr($sourceFileName, strripos($sourceFileName, ".")); 
        //保存路径 
        $savePath = "$dir\php_source_$filename." . $sourceExtendName; 
        //当前头像基于原图的初始化参数（只有上传原图时才会发送该数据，且发送的方式为POST），用于修改头像时保证界面的视图跟保存头像时一致，提升用户体验度。 
        //修改头像时设置默认加载的原图url为当前原图url+该参数即可，可直接附加到原图url中储存，不影响图片呈现。 
        $init_params = $_POST["__initParams"]; 
        $result['sourceUrl'] = toVirtualPath($savePath) . $init_params; 
        move_uploaded_file($source_pic["tmp_name"], $savePath); 
        $success_num++; 
    } 
}