头像截图上传三种方式之一(一个简单易用的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>
这段代码只是用于显示上传成功后的图片,可以根据个人需要进行修改。
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&uploadUrl=./upfile.aspx&uploadSrc=false" /> <embed align="" allowscriptaccess="always" bgcolor="#FFFFFF" flashvars="imgUrl=./default.jpg&uploadUrl=./upfile.aspx&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>
<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
关于这两个插件的介绍,都可以通过以上网址了解。