flash实现头像上传的两种方式（图片上传）

基本信息

源码名称：flash实现头像上传的两种方式（图片上传）

源码大小：2.19M

文件格式：.zip

开发语言：C#

更新时间：2015-08-25

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 2 元　

源码介绍

方式一：

方式二：

上传和截图代码一：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImg.aspx.cs" Inherits="flash实现头像上传的两种方式.swfupload上传和截图.UploadImg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <link href="../themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="../JS/handlers.js" type="text/javascript"></script>
    <script src="../JS/swfupload.js" type="text/javascript"></script>
    <script src="../JS/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../JS/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                //修改执行上传操作的文件(aspx或ashx)
                upload_url: "cutPhoto.ashx?action=up",
                post_params: {
                    "ASPSESSID": "<%=Session.SessionID %>"
                },

                // File Upload Settings
                file_size_limit: "2 MB",
                file_types: "*.jpg",
                file_types_description: "JPG Images",
                file_upload_limit: 0,    // Zero means unlimited

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                swfupload_preload_handler: preLoad,
                swfupload_load_failed_handler: loadFailed,
                file_queue_error_handler: fileQueueError,
                file_dialog_complete_handler: fileDialogComplete,
                upload_progress_handler: uploadProgress,
                upload_error_handler: uploadError,
                //指定图片上传成功后执行的方法为我们自己定义的ShowData
                upload_success_handler: ShowData,
                upload_complete_handler: uploadComplete,

                // Button settings
                button_image_url: "images/XPButtonNoText_160x22.png",
                button_placeholder_id: "spanButtonPlaceholder",
                button_width: 160,
                button_height: 22,
                button_text: '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 1,
                button_text_left_padding: 5,

                // Flash Settings
                flash_url: "/Flash/swfupload.swf", // Relative to this file
                flash9_url: "/Flash/swfupload_FP9.swf", // Relative to this file

                custom_settings: {
                    upload_target: "divFileProgressContainer"
                },

                // Debug Settings
                debug: false
            });
        }
        //上传成功后执行,将img标签的src设置为返回的图片保存好的路径
        var d;//保存上传成功图片的路径信息
        function ShowData(file, serverData) {
            d = serverData.split(":");
            if (d[0] == "ok") {
                $("#divContent").css("backgroundImage","url(" d[1] ")").css("width",d[2] "px").css("height",d[3] "px");
            }
        };
        $(function () {
            $("#divCut").draggable({ containment: 'parent' }).resizable({ containment: '#divContent' });
            $("#btnCut").click(function () {
                var y = $("#divCut").offset().top - $("#divContent").offset().top;
                var x = $("#divCut").offset().top - $("#divContent").offset().top;
                var width = $("#divCut").width();
                var height = $("#divCut").height();
                $.post("cutPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgSrc": d[1] }, function (data) {
                    $("#imgSrc").attr("src",data);
                });
            });
        });
    </script>


</head>
<body>
    <form>
        <div id="content">	
	        <div id="swfu_container" style="margin: 0px 10px;">
		        <div>
				    <span id="spanButtonPlaceholder"></span>
		        </div>
		        <div id="divFileProgressContainer" style="height: 75px;"></div>
                    <div id="divContent" style="width:300px;height:300px">
                        <div id="divCut" style="width:100px;height:100px;border:solid 1px red"></div>
                    </div>
	        </div>
		</div>
        <input type="button" value="截取头像" id="btnCut" />
        <img id="imgSrc" />

    </form>

</body>
</html>

方式二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>flash上传头像组件演示</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Keywords" content="flash头像上传组件，仿新浪微博头像上传组件，头像图片剪裁" />
  <meta name="Description" content="flash 上传头像，用户体验好，头像剪裁，预览组件" />
  <style type="text/css" media="screen">
  html, body { height:100%; background-color: #ffffff;}
  #flashContent { width:100%; height:100%; }
  </style>
  
  <script type="text/javascript">
   function uploadevent(status){
	//alert(status);
        status  = '';
     switch(status){
     case '1':
         var time = new Date().getTime();
        //这里用于显示刚上传的图片，但图片地址是固定的，不是后天接收到的路径
		document.getElementById('avatar_priview').innerHTML = "头像1 : <img src='1.png?"   time   "'/> <br/> 头像2: <img src='2.png?"   time   "'/><br/> 头像3: <img src='3.png?"   time   "'/>" ;
		
	break;
     break;
     case '-1':
	  window.location.reload();
     break;
     default:
     window.location.reload();
    } 
   }
  </script>
 </head>
 <body>
  <div id="altContent">


<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="650" HEIGHT="450" id="myMovieName">
<!---这里修改flash路径-->
<PARAM NAME=movie VALUE="/Flash/avatar.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<!----./default.jpg修改默认图片路径，=./upfile.aspx修改后台执行页面的路径------------->
<param name="flashvars" value="imgUrl=/UploadImg/default.jpg&uploadUrl=upfile.ashx&uploadSrc=false&pSize=162|162|48|48|20|20" />
<!----./default.jpg修改默认图片路径，=./upfile.aspx修改后台执行页面的路径------------->
<!---这里修改flash路径-->
<EMBED src="/Flash/avatar.swf" quality=high bgcolor=#FFFFFF WIDTH="650" HEIGHT="450" wmode="transparent" flashVars="imgUrl=/UploadImg/default.jpg&uploadUrl=upfile.ashx&uploadSrc=false&pSize=162|162|48|48|20|20"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" allowScriptAccess="always"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
 

  </div>
  <!--这个div用于演示刚上传的图片，可以删除 --->
  <div id="avatar_priview"></div>

</body>
</html>