zoukankan      html  css  js  c++  java
  • 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款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直接充值

    强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
    分类:图片代码 > 缩略图 难易:中级
    查看演示 下载资源: 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服务器环境中查看、测试! 既 http://*/simpleDemo.html 而不是本地路径 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_ 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为: " +  msg.content.sourceUrl + " " + "头像已成功保存至服务器,url为: " + msg.content.avatarUrls.join(" ") + " 传递的userid=" + msg.content.userid + "&username=" + msg.content.username); 
                    else 
                        alert("头像已成功保存至服务器,url为: " + msg.content.avatarUrls.join(" ") + " 传递的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 = "$dirphp_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++; 
        } 
    }

    后台处理缩略图在这里就不细说了,请下载压缩文件查看。有兴趣的朋友可以再看看<a href='http://www.sucaihuo.com/js/3.html' target='_blank'> PHP+jQuery+Ajax多图片上传</a>。

  • 相关阅读:
    redis乐观锁
    redis
    解决创建Redis容器没有conf配置文件
    redis缓存配置
    Docker架构
    Flask获取数据的一些方法
    Nginx正向代理、反向代理与负载均衡
    Sanic
    Dockerfile详解
    Centos7上安装docker
  • 原文地址:https://www.cnblogs.com/webenh/p/6226216.html
Copyright © 2011-2022 走看看