在之前的一篇文章中，谈到了使用文件对话框选取并预览本地文件。当时就有一个想法，将这个
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,代震军
posted on 2008-06-16 09:37
代震军 阅读(2257)
评论(23) 编辑 收藏 所属分类:
silverlight