头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)

flash中有版权声明,不适合商业开发。这是官网地址:http://www.hdfu.net/ 

本文参考了http://blog.csdn.net/yafei450225664/article/details/12855915     并且加入了自己的解析,以供之后的参考。

官网提供的demo包,包含了php,jsp,asp,aspx的demo。

1、Demo中,avatar.swf是执行上传的flash文件;default.jpg是默认显示的图片;demo.html是demo,可以直接复制里面的代码;index.html 是下载地址,对程序不起作用。upfile.aspx是执行上传的后台文件,其实我们可以用一般处理程序代替,没必要写aspx,xml的实际作用不了解无需修改。

2.demo.html中,有两个层,altContent存放flash,里面的东西最好不要修改,我们只需修改里面引用flash的路径及默认图片,avatar_priview用于显示上传成功后的图片,可以删除。JS中uploadevent上传成功后执行,status表示响应报文值,返回1则表示成功,执行

<script type="text/javascript">
     function uploadevent(status, picUrl, callbackdata) {
         //alert(picUrl); //后端存储图片
         //    alert(callbackdata);
         status += '';
         switch (status) {
             case '1':
                 var time = new Date().getTime();
                 var filename162 = picUrl + '_162.jpg';
                 var filename48 = picUrl + '_48.jpg';
                 var filename20 = picUrl + "_20.jpg";

                 document.getElementById('avatar_priview').innerHTML = "头像1 : <img src='" + filename162 + "?" + time + "'/> <br/> 头像2: <img src='" + filename48 + "?" + time + "'/><br/> 头像3: <img src='" + filename20 + "?" + time + "'/>";

                 break;
             case '-1':
                 window.location.reload();
                 break;
             default:
                 window.location.reload();
         }
     }
  

 </script>
View Code

这段代码只是用于显示上传成功后的图片,可以根据个人需要进行修改。

3.html中的代码如下

<div id="altContent">
    <object id="myMovieName" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
        height="450" width="650">
        <param name="movie" value="avatar.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#FFFFFF" />
        <param name="flashvars" 
            value="imgUrl=./default.jpg&amp;uploadUrl=./upfile.aspx&amp;uploadSrc=false" />
        <embed align="" allowscriptaccess="always" bgcolor="#FFFFFF" 
            flashvars="imgUrl=./default.jpg&amp;uploadUrl=./upfile.aspx&amp;uploadSrc=false" 
            height="450" name="myMovieName" 
            pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" 
            src="./avatar.swf" type="application/x-shockwave-flash" width="650" 
            wmode="transparent"></embed>
</EMBED>
</object>
</div>
<div id="avatar_priview">
</div>
View Code

<embed></embed>标签之间的代码是负责链接到avatar.swf和upfile.aspx后台代码和默认照片,根据个人需要可以进行修改。

4.后台代码

<%@Import NameSpace="System.IO"%>
<%@Import NameSpace="System"%>
<% @ Page Language="C#" %>
<%


DateTime dtStart = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970,1,1));
DateTime dtNow = DateTime.Parse(DateTime.Now.ToString());
TimeSpan toNow = dtNow.Subtract(dtStart);
string timeStamp = toNow.Ticks.ToString();
timeStamp = timeStamp.Substring(0,timeStamp.Length - 7);


String savePath = "./";
String savePicName = timeStamp;


String file_src = savePath + savePicName + "_src.jpg";
String filename162 = savePath + savePicName + "_162.jpg";
String filename48 = savePath + savePicName + "_48.jpg";
String filename20 = savePath + savePicName + "_20.jpg";

//获取原图和修改大小后的三张图片:
String pic = Request.Form["pic"];
String pic1 = Request.Form["pic1"];
String pic2 = Request.Form["pic2"];
String pic3 = Request.Form["pic3"];

/*并通过File保存,当然,我们如果只需要一张图片,可以删除多余代码,也可以修改保存图片的地址。有了图片的地址,我们可以直接在这里将图片地址保存到数据库中。

这里要注意的是,返回响应报文

Response.Write("{\"status\":1}");是不能修改的,如果改为其他值,比如图片路径,那么后台执行上传是可以成功的,但前台无法响应上传成功,不能弹出上传成功的框。
如果我们需要把后台处理后的路径返回前台,可以用Session或静态变量在后台保存值。*/

//原图
if (pic.Length == 0) {
}else {
byte[] bytes = Convert.FromBase64String(pic); //将2进制编码转换为8位无符号整数数组

FileStream fs =new FileStream(Server.MapPath(file_src),System.IO.FileMode.Create);
fs.Write(bytes, 0, bytes.Length);
fs.Close();
}

byte[] bytes1 = Convert.FromBase64String(pic1); //将2进制编码转换为8位无符号整数数组.
byte[] bytes2 = Convert.FromBase64String(pic2); //将2进制编码转换为8位无符号整数数组.
byte[] bytes3 = Convert.FromBase64String(pic3); //将2进制编码转换为8位无符号整数数组.

 

//图1
FileStream fs1 =new FileStream(Server.MapPath(filename162),System.IO.FileMode.Create);
fs1.Write(bytes1, 0, bytes1.Length);
fs1.Close();

//图2
FileStream fs2 =new FileStream(Server.MapPath(filename48),System.IO.FileMode.Create);
fs2.Write(bytes2, 0, bytes2.Length);
fs2.Close();

//图3
FileStream fs3 =new FileStream(Server.MapPath(filename20),System.IO.FileMode.Create);
fs3.Write(bytes3, 0, bytes3.Length);
fs3.Close();

String picUrl = savePath + savePicName;

Response.Write("{\"status\":1,");
Response.Write("\"picUrl\":\""+picUrl+"\"}");

%>

接下来推出头像截图上传三种方式之二(SWFUpload)(asp.net版本)和三(jquery插件)

SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。另一个Flash插件用起来比较简单,支持截图、本地摄像头拍照上传,
关于SWFUpload的介绍,可以查看百度百科,博客园中也有SWFUpload2.5的中文翻译文档。 
http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html 
SWFUpload .Net安装包和官方Demo: 
http://download.csdn.net/detail/qq14039056961/5246596 
关于这两个插件的介绍,都可以通过以上网址了解。

posted @ 2014-07-21 10:50  90后程序媛  阅读(1479)  评论(0编辑  收藏  举报