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

     在之前的一篇文章中，谈到了使用文件对话框选取并预览本地文件。当时就有一个想法，将这个
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, 0, 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 x:Name="LayoutRoot" Background="Black" ShowGridLines="False" Margin="8">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="196" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="48" />
        </Grid.RowDefinitions>
        <ListBox  x:Name="myList" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
              ItemsSource="{Binding}"
              Grid.Row="0"
              Grid.Column="0"
              Grid.RowSpan="2"
              SelectionChanged="OnSelectionChanged" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
            </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <my:GridSplitter Width="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Grid.Column="1"></my:GridSplitter>

        <Image  x:Name="myImage" Grid.Column="1" />
        <StackPanel Grid.Row="1" Background="white" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Stretch">
        <Button Grid.Row="1"
          Grid.Column="0"
          Content="选择图片"
          Margin="8" Click="OnClick" FontSize="16"  Width="100"/>
        <Button Grid.Row="1"
          Grid.Column="2"
          Content="上传该图片"
          Margin="8" Click="OnUpLoadClick" FontSize="16" 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, 0, buffer.Length)) > 0)
        {
            outputStream.Write(buffer, 0, 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,代震军