asp.net 图片批量下传预览，在Silverlight页面中读取并滚动显示
asp.net 图片批量上传预览，在Silverlight页面中读取并滚动显示
Silverlight动态读取图片并滚动显示
asp.net页面中图片上传并预览
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiFileUpload.aspx.cs"
Inherits="GQGL_MultiFileUpload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="css/album.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="Layout_2">
<div id="Uploadimg" class="cols_1">
<div id="AlbumUpload" class="album meat">
<div class="upLoad" style="text-align: center">
<div id="uploadPanel">
<div class="divLine">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnAdd" runat="server" Text="添加文件" OnClick="btnAdd_Click" />
</div>
</div>
<div>
<table style="text-align: center">
<tr>
<td align="center" width="15%">
文<br />
件<br />
列<br />
表<br />
：
</td>
<td align="center" width="85%">
<asp:ListBox ID="lbxFile" runat="server" Height="145px" Width="300px"></asp:ListBox>
</td>
</tr>
</table>
</div>
<div class="divLine">
<div class="btnUpload">
<asp:Button ID="btnDelete" runat="server" Text="删除文件" OnClick="btnDelete_Click" />
<asp:Button ID="btnPost" runat="server" Text="完成上传" OnClick="btnPost_Click" />
</div>
</div>
<p>
温馨提示：1、单张图片最大<span>10M</span><br />
2、支持<span>jpg</span>，<span>png</span>格式
</p>
</div>
<div class="upView">
<div class="divLine">
图片预览：</div>
<ul>
<li>
<div class="p">
<img id="img1" alt="" title="暂无图片" src="images/uploadimg_default.jpg" runat="server" /></div>
<div class="d" id="preTitle1">
1</div>
</li>
<li>
<div class="p">
<img id="img2" alt="" title="暂无图片" src="images/uploadimg_default.jpg" runat="server" /></div>
<div class="d" id="preTitle2">
2</div>
</li>
<li>
<div class="p">
<img id="img3" alt="" title="暂无图片" src="images/uploadimg_default.jpg" runat="server" /></div>
<div class="d" id="preTitle3">
3</div>
</li>
<li>
<div class="p">
<img id="img4" alt="" title="暂无图片" src="images/uploadimg_default.jpg" runat="server" /></div>
<div class="d" id="preTitle4">
4</div>
</li>
<li>
<div class="p">
<img id="img5" alt="" title="暂无图片" src="images/uploadimg_default.jpg" runat="server" /></div>
<div class="d" id="preTitle5">
5</div>
</li>
<li>
<div class="p">
<img id="img6" alt="" title="暂无图片" src="images/uploadimg_default.jpg" runat="server" /></div>
<div class="d" id="preTitle6">
6</div>
</li>
</ul>
</div>
<div id="x" runat="server">
</div>
</div>
</div>
</div>
<asp:HiddenField ID="allFileSize" runat="server" Value="0" />
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.UI.HtmlControls;
using System.Drawing;
using USTC;
public partial class GQGL_MultiFileUpload : System.Web.UI.Page
{
private String folder;
private String url;
DM dm = new DM();
protected void Page_Load(object sender, EventArgs e)
{
folder = Server.MapPath("~/ClientBin/image");
if (!Directory.Exists(folder))
{
Directory.CreateDirectory(folder);
}
}
protected void btnAdd_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
String guid = Guid.NewGuid().ToString();
String newFileName = folder + "\\" + guid + Path.GetExtension(FileUpload1.FileName);
url = Page.ResolveUrl("~") + "ClientBin/image/" + guid + Path.GetExtension(FileUpload1.FileName);
int totalFileSize = Int32.Parse(allFileSize.Value);
int fileSize = FileUpload1.PostedFile.ContentLength;
//此处也可以限制单个文件的大小
if (totalFileSize + fileSize > 1024 * 1024 * 100)
{
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "", @"<script>alert('总上传的文件超过了大小设置 1024 * 1024 ！')</script>");
return;
}
if (FileUpload1.FileName.Split('.')[1].ToLower() == "jpg" || FileUpload1.FileName.Split('.')[1].ToLower() == "png")
{
FileUpload1.SaveAs(newFileName);
}
else
{
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "", @"<script>alert('添加的文件格式不正确,确保是jpg或png格式 ！')</script>");
return;
}
ListItem item = new ListItem();
item.Text = FileUpload1.FileName;
item.Value = url + "|" + newFileName;
for (int i = 0; i < lbxFile.Items.Count; i++)
{
if (lbxFile.Items[i].Text.Equals(FileUpload1.FileName, StringComparison.InvariantCultureIgnoreCase))
{
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "", @"<script>alert('不能添加已经添加过的文件！')</script>");
return;
}
}
totalFileSize += fileSize;
allFileSize.Value = totalFileSize.ToString();
lbxFile.Items.Add(item);
PreViewImage();
}
}
protected void btnPost_Click(object sender, EventArgs e)
{
//对上传的文件进行进一步处理，或者退出弹出窗口等操作
for (int i = lbxFile.Items.Count - 1; i > -1; i--)
{
//保存图片的同时保存入数据库表
string depId = Session["depId"].ToString();
string picUrl = lbxFile.Items[i].Value.Split('|')[1].Substring(lbxFile.Items[i].Value.Split('|')[1].LastIndexOf('\\')+1);
string description = lbxFile.Items[i].Text.Split('.')[0];
string strSQL = "insert into 灌区图片(BelongToDepId,PicUrl,PicDescription) values('" + depId + "','" + picUrl + "','" + description + "')";
dm.execsql(strSQL);
}
for (int i = lbxFile.Items.Count - 1; i > -1; i--)
{
lbxFile.Items.Remove(lbxFile.Items[i]);
}
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "", @"<script>alert('上传成功！')</script>");
}
protected void btnDelete_Click(object sender, EventArgs e)
{
for (int i = lbxFile.Items.Count - 1; i > -1; i--)
{
if (lbxFile.Items[i].Selected)
{
String value = lbxFile.Items[i].Value;
lbxFile.Items.Remove(lbxFile.Items[i]);
//同时去掉预览中的图片
string index = "img" + (i + 1);
(Page.FindControl(index) as HtmlImage).Src = "images/uploadimg_default.jpg";
(Page.FindControl(index) as HtmlImage).Width = 120;
(Page.FindControl(index) as HtmlImage).Height = 90;
(Page.FindControl(index) as HtmlImage).Attributes["title"] = "暂无图片";
if (File.Exists(value.Split('|')[1]))
{
File.Delete(value.Split('|')[1]);
}
}
}
}
private void PreViewImage()
{
for (int i = 0; i < lbxFile.Items.Count; i++)
{
string index = "img" + (i + 1);
(Page.FindControl(index) as HtmlImage).Src = lbxFile.Items[i].Value.Split('|')[0];
(Page.FindControl(index) as HtmlImage).Width = 120;
(Page.FindControl(index) as HtmlImage).Height = 120;
(Page.FindControl(index) as HtmlImage).Attributes["title"] = lbxFile.Items[i].Text.Split('.')[0];
}
}
}
Silverlight页面展示
<UserControl x:Class="gqfc.SPImageList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Loaded="UserControl_Loaded">
<Grid x:Name="LayoutRoot" Background="White">
<Border HorizontalAlignment="Right" Margin="0,25,0,0" Width="170" BorderBrush="#FF0084FF" BorderThickness="1">
<StackPanel x:Name="sp" MouseEnter="sp_MouseEnter" MouseLeave="sp_MouseLeave">
<Border x:Name="b1" Margin="0,2" BorderBrush="#FF0084FF" BorderThickness="0,1">
<Image x:Name="img1" Source="/gqfc;component/Photos/uploadimg_default.jpg" Cursor="Hand" Stretch="Fill" Height="128"/>
</Border>
<Border x:Name="b2" Margin="0,2" BorderBrush="#FF0084FF" BorderThickness="0,1">
<Image x:Name="img2" Source="/gqfc;component/Photos/uploadimg_default.jpg" Cursor="Hand" Stretch="Fill" Height="128"/>
</Border>
<Border x:Name="b3" Margin="0,2" BorderBrush="#FF0084FF" BorderThickness="0,1">
<Image x:Name="img3" Source="/gqfc;component/Photos/uploadimg_default.jpg" Cursor="Hand" Stretch="Fill" Height="128"/>
</Border>
<Border x:Name="b4" Margin="0,2" BorderBrush="#FF0084FF" BorderThickness="0,1">
<Image x:Name="img4" Source="/gqfc;component/Photos/uploadimg_default.jpg" Cursor="Hand" Stretch="Fill" Height="128"/>
</Border>
<Border x:Name="b5" Margin="0,2" BorderThickness="0,1" BorderBrush="#FF0084FF">
<Image x:Name="img5" Source="/gqfc;component/Photos/uploadimg_default.jpg" Cursor="Hand" Stretch="Fill" Height="128"/>
</Border>
<Border x:Name="b6" Margin="0,2" BorderBrush="#FF0084FF" BorderThickness="0,1">
<Image x:Name="img6" Source="/gqfc;component/Photos/uploadimg_default.jpg" Cursor="Hand" Stretch="Fill" Height="128"/>
</Border>
</StackPanel>
</Border>
<ComboBox x:Name="cbSelectArea" HorizontalAlignment="Right" VerticalAlignment="Top" Width="170" FontSize="13.333" FontFamily="Microsoft YaHei" Height="25" SelectionChanged="cbSelectArea_SelectionChanged"/>
</Grid>
</UserControl>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;
using System.Windows.Media.Imaging;
using System.Windows.Media.Effects;
using System.Json;
using gqfc.ServiceReference1;
using System.Collections.ObjectModel;
namespace gqfc
{
public partial class SPImageList : UserControl
{
/// <summary>
/// Json数据源
/// </summary>
string imgData = "[{src:'/image/uploadimg_default.jpg',name:'暂无图片'}]";
int currentIndex = 0;//当前imgData的索引
int currentImgIndex = 0;//当前第几张小图为阴影区
int _Max = 6;//右侧显示几张小图
List<ImageItem> listSrc = new List<ImageItem>();
private DispatcherTimer _timer;
public SPImageList()
{
InitializeComponent();
}
#region 获取部门列表
/// <summary>
/// 获取部门列表
/// </summary>
public void BindComboBox()
{
getDataSoapClient client = new getDataSoapClient();
client.getDepartmentListCompleted += new EventHandler<getDepartmentListCompletedEventArgs>(client_getDepartmentListCompleted);
client.getDepartmentListAsync();
}
void client_getDepartmentListCompleted(object sender, getDepartmentListCompletedEventArgs e)
{
ObservableCollection<Department> lists = e.Result;
this.cbSelectArea.ItemsSource = lists;
this.cbSelectArea.DisplayMemberPath = "DepName";
this.cbSelectArea.UpdateLayout();
this.cbSelectArea.SelectedIndex = 0;
}
#endregion
private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
//绑定ComboBox
BindComboBox();
getDataSoapClient client = new getDataSoapClient();
client.getAllImageCompleted += new EventHandler<getAllImageCompletedEventArgs>(client_getAllImageCompleted);
client.getAllImageAsync();
LoadImageAndScroll();
}
void client_getAllImageCompleted(object sender, getAllImageCompletedEventArgs e)
{
imgData = e.Result;
//MessageBox.Show(imgData);
}
/// <summary>
/// 加载图片并滚动显示
/// </summary>
public void LoadImageAndScroll()
{
currentIndex = 0;
currentImgIndex = 0;
LoadImage();
#region 启动定时器
_timer = new DispatcherTimer();
_timer.Interval = new TimeSpan(0, 0, 2);
_timer.Tick += new EventHandler(_timer_Tick);
_timer.Start();
#endregion
}
/// <summary>
/// 加载图片
/// </summary>
public void LoadImages()
{
currentIndex = 0;
currentImgIndex = 0;
LoadImage();
}
void _timer_Tick(object sender, EventArgs e)
{
down(sender, null);
}
/// <summary>
/// 从下往上滚动的逻辑处理
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void down(object sender, MouseButtonEventArgs e)
{
currentIndex++;
if (currentIndex >= listSrc.Count)
{
currentIndex = 0;
}
LoadImage();
}
/// <summary>
/// 加载图片
/// </summary>
private void LoadImage()
{
listSrc.Clear();
JsonValue jv = JsonArray.Parse(imgData);
for (int i = 0; i < jv.Count; i++)
{
listSrc.Add(new ImageItem() { src = jv[i]["src"].ToString().Replace("\\/", "/").Replace("\"", ""), name = jv[i]["name"].ToString().Replace("\\/", "/").Replace("\"", "") });
}
int _start = currentIndex % listSrc.Count;
for (int i = 0; i < _Max; i++)
{
if (_start >= listSrc.Count)
{
_start = _start % listSrc.Count;
}
Image img = this.sp.FindName("img" + (i + 1).ToString()) as Image;
if (i < listSrc.Count)
{
img.Source = new BitmapImage(new Uri(listSrc[_start].src, UriKind.Relative));
}
else
{
img.Source = new BitmapImage(new Uri("/Photos/uploadimg_default.jpg", UriKind.Relative));
}
//在这里处理个数问题
if (i == currentImgIndex)
{
int index = i + 1;
//设置对应的Border边框和颜色
string tag = "b" + index;
(sp.FindName(tag) as Border).BorderBrush = new SolidColorBrush(Colors.Red);
(sp.FindName(tag) as Border).BorderThickness = new Thickness(2, 2, 2, 2);
//增加阴影效果
//DropShadowEffect dse = new DropShadowEffect();
//dse.BlurRadius = 10;
//dse.ShadowDepth = 10;
//dse.Opacity = 0.8;
//dse.Direction = 145;
//img.Effect = dse;
}
else
{
img.Effect = null;
}
_start++;
}
}
private void cbSelectArea_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
Department dp = this.cbSelectArea.SelectedItem as Department;
//获取部门ID
getDataSoapClient client = new getDataSoapClient();
client.getImageByDepartmentIDCompleted += new EventHandler<getImageByDepartmentIDCompletedEventArgs>(client_getImageByDepartmentIDCompleted);
client.getImageByDepartmentIDAsync(dp.DepId);
//MessageBox.Show(dp.DepId);
}
void client_getImageByDepartmentIDCompleted(object sender, getImageByDepartmentIDCompletedEventArgs e)
{
//重新赋值
imgData = e.Result;
if (imgData == "[]")
{
imgData = "[{src:'/image/uploadimg_default.jpg',name:'暂无图片'}]";
}
else
{
}
//MessageBox.Show(imgData);
//载入图片
LoadImages();
}
private void sp_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
_timer.Stop();
}
private void sp_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
_timer.Start();
}
}
/// <summary>
/// 自定义类
/// </summary>
public class ImageItem
{
public string src { set; get; }
public string name { set; get; }
}
}