在Silverlight 2 (Beta2) 中使用webclient上传图片

概述     在之前的一篇文章中，谈到了使用文件对话框选取并预览本地文件。当时就有一个想法，将这个 DEMO扩展成为支持图片上传。所以今天本文会以上个DEMO中的部分代码为原型，在其基础上稍加 变动，使其支持图片上传功能。如下图所示:        首先，我们需要建立一个silverlight application ,名称为：UploadFileWeb          然后在该WEB项目中新建一个      在之前的一篇文章中，谈到了使用文件对话框选取并预览本地文件。当时就有一个想法，将这个
DEMO扩展成为支持图片上传。所以今天本文会以上个DEMO中的部分代码为原型，在其基础上稍加
变动，使其支持图片上传功能。如下图所示:

 

     首先，我们需要建立一个silverlight application,名称为：UploadfileWeb
   
     然后在该WEB项目中新建一个Generic Handler,名称为:Handler.ashx
   
     下面就是它的代码：
   
using  System;
using  System.Web;
using  System.IO;

public   class  Handler : System.Web.IhttpHandler {

     public   voID  ProcessRequest (httpContext context)
    {     // 获取上传的数据流
         Stream sr  =  context.Request.inputStream;
          try
         {
             // 生成随机的文件名（本DEMO中的上传图片名称也可用参数方法传递过来）
             string  chars  =   " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMnopQRSTUVWXYZ " ;
            Random rnd  =   new  Random();
             string  filename  =   "" ;
             for  ( int  i  =   1 ; i  <=   32 ; i ++ )
            {
                filename  +=  chars.Substring(rnd.Next(chars.Length),  1 );
            }
           
             byte [] buffer  =   new   byte [ 4096 ];
             int  bytesRead  =   0 ;
             // 将当前数据流写入服务器端文件夹ClIEntBin下
             using  (fileStream fs  =  file.Create(context.Server.MapPath( " ClIEntBin/ "   +  filename  +   " .jpg " ),  4096 ))
            {
                 while  ((bytesRead  =  sr.Read(buffer,  0 , buffer.Length))  >   0 )
                {
                     // 向文件中写信息
                    fs.Write(buffer, bytesRead);
                }
            }
           
            context.Response.ContentType  =   " text/plain " ;
            context.Response.Write( " 上传成功 " );
         }
          catch  (Exception e)
         {
            context.Response.ContentType  =   " text/plain " ;
            context.Response.Write( " 上传失败, 错误信息: "   +  e.Message);
         }
          finally
         {
             sr.dispose();
         }
        
    }
  
     public   bool  IsReusable {
     get  {
             return   false ;
        }
    } 
}

     因为要加入上传图片按钮，所以将page.xaml内容修改如下:
   
< GrID  @H_709_404@x:name ="LayoutRoot" @H_709_404@ Background ="Black" @H_709_404@ ShowGrIDlines ="False" @H_709_404@ margin ="8" >
         < GrID.ColumnDeFinitions >
             < ColumnDeFinition  @H_709_404@WIDth ="196" @H_709_404@  />
             < ColumnDeFinition  @H_709_404@WIDth ="*" @H_709_404@  />
         </ GrID.ColumnDeFinitions >
         < GrID.RowDeFinitions >
             < RowDeFinition  @H_709_404@Height ="*" @H_709_404@  />
             < RowDeFinition  @H_709_404@Height ="48" @H_709_404@  />
         </ GrID.RowDeFinitions >
         < ListBox   @H_709_404@x:name ="myList" @H_709_404@ HorizontalAlignment ="Stretch" @H_709_404@ VerticalAlignment ="Stretch" @H_709_404@
              ItemsSource =" {Binding} " @H_709_404@
              GrID.Row ="0" @H_709_404@
              GrID.Column ="0" @H_709_404@
              GrID.rowspan ="2" @H_709_404@
              SelectionChanged ="OnSelectionChanged" @H_709_404@  >
             < ListBox.ItemTemplate >
                 < DataTemplate >
                     < TextBlock  @H_709_404@Text =" {Binding name} " @H_709_404@  />
             </ DataTemplate >
             </ ListBox.ItemTemplate >
         </ ListBox >
         < my:GrIDSplitter  @H_709_404@WIDth ="1" @H_709_404@ HorizontalAlignment ="left" @H_709_404@ VerticalAlignment ="Stretch" @H_709_404@ GrID.Column ="1" ></ my:GrIDSplitter >

         < Image   @H_709_404@x:name ="myImage" @H_709_404@ GrID.Column ="1" @H_709_404@  />
         < StackPanel  @H_709_404@GrID.Row ="1" @H_709_404@ Background ="white" @H_709_404@ GrID.ColumnSpan ="2" @H_709_404@ OrIEntation ="Horizontal" @H_709_404@ HorizontalAlignment ="Stretch" >
         < button  @H_709_404@GrID.Row ="1" @H_709_404@
          GrID.Column ="0" @H_709_404@
          Content ="选择图片" @H_709_404@
          margin ="8" @H_709_404@ Click ="OnClick" @H_709_404@ FontSize ="16" @H_709_404@  WIDth ="100" />
         < button  @H_709_404@GrID.Row ="1" @H_709_404@
          GrID.Column ="2" @H_709_404@
          Content ="上传该图片" @H_709_404@
          margin ="8" @H_709_404@ Click ="OnUpLoadClick" @H_709_404@ FontSize ="16" @H_709_404@ WIDth ="100" />
         </ StackPanel >   
</ GrID >

     而相应的page.xmal.cs代码也做了修改（相关内容见注释）：
    
public   partial   class  Page : UserControl
{       
     public  Page()
    {
        InitializeComponent();
    }

     voID  OnClick( object  sender, EventArgs args)
    {
        OpenfileDialog openfileDialog  =   new  OpenfileDialog()
        {
            Filter  =   " Jpeg files (*.jpg)|*.jpg|All files(*.*)|*.* " ,
            Multiselect  =   true
        };

         if  (openfileDialog.ShowDialog()  ==   true ) // .DialogResult.OK)
        {
            myList.DataContext  =  openfileDialog.Selectedfiles;
        }
    }

     voID  OnUpLoadClick( object  sender, EventArgs args)
    {
         if  (fi  !=   null )
        {
            WebClIEnt webclIEnt  =   new  WebClIEnt();
           
            webclIEnt.OpenWriteCompleted  +=   new  OpenWriteCompletedEventHandler(webclIEnt_OpenWriteCompleted);
            webclIEnt.OpenWriteAsync( new  Uri( " http://localhost:5840/UploadfileWeb/Handler.ashx " , UriKind.absolute),  " POST " , fi.OpenRead());
        }
         else
        {
            HTMLPage.Window.Alert( " 请选取相应图片!!! " );
        }
    }

     voID  webclIEnt_OpenWriteCompleted( object  sender, OpenWriteCompletedEventArgs e)
    {
         // 将图片数据流发送到服务器上
        Stream inputStream  =  e.UserState  as  Stream;
        Stream outputStream  =  e.Result;

         byte [] buffer  =   new   byte [ 4096 ];
         int  bytesRead  =   0 ;

         while  ((bytesRead  =  inputStream.Read(buffer, buffer.Length))  >   0 )
        {
            outputStream.Write(buffer, bytesRead);
        }
        outputStream.Close();
        inputStream.Close(); HTMLPage.Window.Alert( " 图片上传成功!!! " );
    }

 
    fileDialogfileInfo fi ; // 获取选定图片信息
   
     private   voID  OnSelectionChanged( object  sender, SelectionChangedEventArgs e)
    {
         if  ((e.AddedItems  !=   null )  &&  (e.AddedItems.Count  >   0 ))
        {
            fi  =  e.AddedItems[ 0 ]  as  fileDialogfileInfo;
          
             if  (fi  !=   null )
            {
                 using  (Stream stream  =  fi.OpenRead())
                {
                    BitmAPImage image  =   new  BitmAPImage();
                    image.SetSource(stream);
                    myImage.source  =  image;
                    myImage.Visibility  =  Visibility.Visible;
                    stream.Close();
                }
            }
        }
    }

}

    好了，今天的内容就到这里了。
   
    源码下载链接，请点击这里：）           TAG: silverlight,upload image,上传,daizhj,代震军 总结

以上是内存溢出为你收集整理的在Silverlight 2 (Beta2) 中使用webclient上传图片全部内容，希望文章能够帮你解决在Silverlight 2 (Beta2) 中使用webclient上传图片所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。