我们检测到你可能使用了 AdBlock 或 Adblock Plus,请不要屏蔽素材鸟的广告嘛,请支持我们更好的发展下去。
你可以设定特殊规则或将素材鸟加入白名单,以便我们更好地为大家提供免费素材。
关闭
头像

利用Flash上传插件上传头像支持旋转拖拽剪裁生成缩略图等

来源:素材鸟 素材鸟 2018-06-05 15:24浏览(935) 收藏 点赞

素材鸟QQ群:73014387,在线充值,或联系QQ:201240120直接充值

今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件。 相信大家也知道,要使用Flash这个插件的话需要客户端安装有Flash Player后才可使用(这也算是一个弊端,大家权衡之后可以使用),

如果客户端PC没有安装Flash组件的话,请从http://dl.pconline.com.cn/html_2/1/114/id=8122&pn=0.html下载安装。

利用Flash上传插件实现对头像的上传裁剪缩放等处理

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

  • 上传并预览,用户可以任意选择区域,支持头像旋转

  • 支持上传成功,js 回调函数

  • 无论图片过大还是过小,都可以按照固定大小显示

  • 支持亮度,对比度,饱和度修饰

  • 支持头像拍照保存

  • 支持php,asp,jsp,asp.net 调用

  • 兼容性好,任何浏览器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用


【部分代码说明】

(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>

之后是对的js代码,代码简单说明

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"); 
    }; 
});

详细代码请参看下载文件中的代码

下载资源 下载积分:50积分
声明:本文为原创文章,如需转载,请注明来源www.sucainiao.com并保留原文链接:85.html
如果您觉得本文的内容对您的学习开发有所帮助,您可以打赏本篇文章,感谢!
评论0
头像
友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 201240120