一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

asp.net与SWFUpload头像截图上传实例

时间:2013-04-14 编辑:简简单单 来源:一聚教程网

SWFUpload自定义性很强,非常适合做上传操作,但有时候我们只也可以用一些做好的f更简单的falsh完成这一功能。

下面我们就用一个比较简单的插件,效果如下

image

学习一个插件,我们可以先熟悉它提供的Demo。

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

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

 代码如下 复制代码

var time = new Date().getTime();
        document.getElementById('avatar_priview').innerHTML = "头像1 :
头像2:
头像3: " ;

这段代码只是用于显示上传成功后的图片,可以删除。我修改后的demo.html

demo.html 
 

 代码如下 复制代码

 
 
   flash上传头像组件演示
  
   words" content="flash头像上传组件,仿新浪微博头像上传组件,头像图片剪裁" />
  
  
  
  
 
 
  

 
 
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
 WIDTH="650" HEIGHT="450" id="myMovieName">
 
 
 
 
 
 
 
 
   NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" allowScriptAccess="always"
 PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
 
 

 
 
  

  
  

 
 
 

们大概了解了前台做了什么操作,下面我们看一下后台。

后台很简单,获取原图和修改大小后的三张图片:

 代码如下 复制代码
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或静态变量在后台保存值

upfile.ashx

 代码如下 复制代码
 public void ProcessRequest(HttpContext context)
         {
             String pic = context.Request.Form["pic"];
             String pic1 = context.Request.Form["pic1"];
             String pic2 = context.Request.Form["pic2"];
             String pic3 = context.Request.Form["pic3"];
 
             //原图
             if (pic.Length == 0)
             {
             }
             else
             {
                 byte[] bytes = Convert.FromBase64String(pic);  //将2进制编码转换为8位无符号整数数组
 
                 string url = "./src.png";
                 FileStream fs = new FileStream(context.Server.MapPath(url), 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,
             string url1 = "./1.png";//需要修改图片保存地址,否则每次都是1.png,第二次会覆盖,为避免重名,可以使用guid:string fileLoadName =Guid.NewGuid().ToString() + ".png";
             FileStream fs1 = new FileStream(context.Server.MapPath(url1), System.IO.FileMode.Create);
             fs1.Write(bytes1, 0, bytes1.Length);
             fs1.Close();
 
             //图2
             string url2 = "./2.png";
             FileStream fs2 = new FileStream(context.Server.MapPath(url2), System.IO.FileMode.Create);
             fs2.Write(bytes2, 0, bytes2.Length);
             fs2.Close();
 
             //图3
             string url3 = "./3.png";
             FileStream fs3 = new FileStream(context.Server.MapPath(url3), System.IO.FileMode.Create);
             fs3.Write(bytes3, 0, bytes3.Length);
             fs3.Close();
             //这里响应的是1,前台接收到json数组{status:1},如果返回图片地址,如改为context.Response.Write("{"status":"+url1+"}");则前台页面无法执行uploadevent方法,只能按固定格式{"status":1}。
             //如果想返回图片路径,可以用静态类或session等方式。
             context.Response.Write("{"status":1}");
         }

至此我们的截图上传功能就完成了。

热门栏目