此预览器,一次只能翻页十张图片,开发人员可根据自己需要,修改前台代码。
==============================页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpFilesAndPreview.aspx.cs" Inherits="WebFramework.CommonUpFiles.UpFilesAndPreview" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片预览器</title>
<base target="_self" />
<style type="text/css">
#show{height:auto;width:700px; text-align:center; margin-bottom:15px;border:1px solid #FFFFFF;display: inline-table}
#show img{ text-align:center; }
#container{ height:auto; width:613px; text-align:center; display: inline-table}
#left{ height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif); margin-top:5px; margin-right:10px;}
#middle{ height:109px; width:545px; float:left; overflow:hidden;}
#thumblist{ width:1090px;}
#thumblist div { width:109px; height:109px; text-align:center; float:left}
.cc{width:109px; height:109px; text-align:center; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011452785.p.gif)}
#thumblist div span { width:95px; height:95px; margin:6px !important;margin:3px; margin-top:6px; border:1px solid #FFFFFF; background-color:#000000; vertical-align:middle; line-height:95px; display:block}
#thumblist div span img { width:100%; height:100%; display:block}
#right{height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif);margin-top:5px; margin-left:10px}
</style>
<script language="javascript" type="text/javascript">
function set_txtSelectFileName(fileName){
window.document.getElementById("txtSelectFileName").value = fileName;
window.document.getElementById("img_Show_ItemID").src = '<%=GetFileHTTPPath %>' + fileName;
if(fileName == '')
window.document.getElementById("img_Show_ItemID").style.display = "none";
else
window.document.getElementById("img_Show_ItemID").style.display = "";
}
</script>
</head>
<body style="background-color:#FFFFFF; text-align:center" >
<form runat="server" id="form1">
<div id="container" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid;background-color: aliceblue;">
<div style="width:100%; height:31px; font-weight: bold; font-size: 21pt; vertical-align: middle; font-style: normal; font-family: 华文行楷, 华文宋体; text-align: center;">图片预览器</div>
<div><hr style="width:100%; height:1px; color:Black;"/></div>
<div id='show' style="clip:rect(auto auto auto 15px); height:400px;"><img src ='' style="width:400px; height:400px;" id="img_Show_ItemID"></div>
<div><hr style="width:100%; height:1px; color:Black;"/></div>
<div id="left"></div>
<div id="middle">
<div id="thumblist">
<asp:Repeater runat="server" ID="Repeater_Images_Item_List">
<ItemTemplate>
<div style="clip:rect(auto auto auto 15px);">
<span><img src ='<%=GetFileHTTPPath %><%#Eval("FileName")%>' style="width:94px; height:93px; cursor:hand;" οnclick="set_txtSelectFileName('<%#Eval("FileName")%>');"></span>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<div id="right"></div>
<div>
<table>
<tr>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" style="width:240px; height:28px;"/></td>
<td><input id="butupFile" style="background-image: url(Image/Button.gif);width:95px; height:28px; background-color: transparent;" type="button" value="开始上传" runat="server" onserverclick="butupFile_ServerClick" /></td>
<td><input id="butDeleteFile" style="background-image: url(Image/Button.gif);width:95px; height:28px; background-color: transparent;" type="button" value="删除选中图片" runat="server" onserverclick="butDeleteFile_ServerClick" /></td>
</tr>
</table>
</div>
</div>
<!--<div>
<input value='聚焦第1张图片' type="button" οnclick="sss(1)" />
<input value='聚焦第2张图片' type="button" οnclick="sss(2)"/>
<input value='聚焦第3张图片' type="button" οnclick="sss(3)"/>
<input value='聚焦第4张图片' type="button" οnclick="sss(4)"/>
<input value='聚焦第5张图片' type="button" οnclick="sss(5)"/>
</div>-->
<script type="text/javascript">
document.all&&document.execCommand("BackgroundImageCache", false, true);
var isIE = (document.all) ? true : false;
var $ = function (id) {
return document.getElementById(id);
};
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
var Bind = function(object, fun,args) {
return function() {
return fun.apply(object,args||[]);
}
}
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
var Tween = {
Quart: {
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
}
}
function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Imgroll =new Class({
options:{
Isrun : false, //判断是否正在滚动
Step : 100,
Time : 10,
t : 0,
b : 0,
c : 0,
d : 60,
Tween : Tween.Quart.easeOut,
Oninit : function(){},
Onstart : function(){},
Onstop : function(){}
},
initialize:function(show,obj,c,total,i,options){
try{
this._show = show //代表大图的那个div
this._obj = obj;
this._c = c;
this._total = total;
this.i = i ;
this.o = ''; //记录图片背景的
this.timer = null;
this.Isrun = this.options.isrun;
this.Step = this.options.Step;
this.Time = this.options.Time;
this.t = this.options.t;
this.b = this.options.b;
this.c = this.options.c;
this.d = this.options.d;
this.Tween = this.options.Tween;
this.Oninit = this.options.Oninit;
this.Onstart= this.options.Onstart;
this.Onstop = this.options.Onstop;
Extend(this,options||{});
var self =this, i = 0,img = this._c.getElementsByTagName('div');
this.o = img[this.i-1];
this.o.className = "cc";
for(;i<img.length;i++)
{
img[i].num = i;
(function(i){
addListener(img[i],'click',Bind(self,self.Start,[img[i]]));
})(i);
}
}catch(e){}
},
Start:function(c){
if(this.Isrun)return;
this.Isrun = true;
var img = this._c.getElementsByTagName('div')
this.b = this._obj.scrollLeft;
if(c)
{
/*if(c.num<this.i)
{
this.c = -1*(this.b);
}
else if(c.num>img.length-1-this._total+this.i)
{
this.c =(img.length - this._total)*this.Step - this.b
}
else
{
this.c = (c.num-this.i+1)*this.Step-this.b;
}*/
this.c = c.num<this.i?(-1)*this.b:(c.num>img.length-1-this._total+this.i?(img.length - this._total)*this.Step - this.b:(c.num-this.i+1)*this.Step-this.b)
}
this.Onstart(c);
this.Run();
},
Run:function(){
if(this.t<this.d)
{
this.RunTo(Math.round(this.Tween(++this.t,this.b,this.c,this.d)))
this.timer = setTimeout(Bind(this,this.Run),this.Time)
}
else
{
this.RunTo(this.b+this.c);
this.Stop();
}
},
RunTo:function(i){
this._obj.scrollLeft = i;
},
Pre:function(){
this.c = this.Step*(-1);
this.Start();
},
Next:function(){
this.c = this.Step;
this.Start();
},
Stop:function(){
clearTimeout(this.timer);
this.t = 0;this.Isrun=false;
this.Onstop()
}
})
var ss = new Imgroll($('show'),$('middle'),$('thumblist'),5,3,{
Step:109, //着里的109是指中间每个包含div图片的宽度,也可以写成$('thumblist').getElementsByTagName('div')[0].offsetWidth;
Onstart:function(obj){
if(!obj)return;
ss._show.getElementsByTagName('img')[0].src = obj.getElementsByTagName('img')[0].src;
this.o.className=''
this.o=obj;
obj.className ='cc';
},
Onstop:function(){
$('left').style.backgroundImage=this._obj.scrollLeft == 0?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)";
$('right').style.backgroundImage=this._obj.scrollLeft == 545?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453832.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)";
}});
addListener($('right'),'mousedown',function(){ss.Next()});
addListener($('right'),'mouseover',function(){cbg1(1)});
addListener($('right'),'mouseout',function(){cbg1(0)});
addListener($('left'),'mousedown',function(){ss.Pre()});
addListener($('left'),'mouseover',function(){cbg(1)});
addListener($('left'),'mouseout',function(){cbg(0)});
function cbg(n){
if(ss._obj.scrollLeft==0)return;
$('left').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453941.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)"
}
function cbg1(n){
if(ss._obj.scrollLeft==545)return;
$('right').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453957.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)"
}
function sss(num){
ss.i =num;
}
</script>
<div style="display:none;">
<asp:TextBox ID="txtSelectFileName" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
===============================后台代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
namespace WebFramework.CommonUpFiles
{
public partial class UpFilesAndPreview : PageBase
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BinderRepeater();
}
}
/// <summary>
/// 类别
/// </summary>
public string GetTypeName
{
get
{
return this.Request["Type"];
}
}
/// <summary>
/// 单据ID
/// </summary>
public string GetOrderID
{
get {
return this.Request["ID"];
}
}
/// <summary>
///得到网络路径
/// </summary>
public string GetFileHTTPPath
{
get
{
return this.Request.Url.Scheme + "://" + this.Request.Url.Host + "/" + this.Request.Url.AbsolutePath.Split('/')[1] + "/Doc/CommonUpFiles/" + GetOrderID + "/" + GetTypeName + "/";
}
}
/// <summary>
/// 得到物理路径
/// </summary>
public string GetPhysicsPath
{
get
{
return this.MapPath("../Doc/CommonUpFiles/" + GetOrderID + "/" + GetTypeName + "/");
}
}
/// <summary>
/// 绑定显示问题
/// </summary>
public void BinderRepeater()
{
DataTable dt = new DataTable();
dt.Columns.Add("FileName", typeof(string));
DirectoryInfo dir = new DirectoryInfo(GetPhysicsPath);
if (dir.Exists == false)
dir.Create();
foreach (FileInfo NextFile in dir.GetFiles())
{
DataRow row = dt.NewRow();
row["FileName"] = NextFile.Name;
dt.Rows.Add(row);
}
this.Repeater_Images_Item_List.DataSource = dt;
this.Repeater_Images_Item_List.DataBind();
if (dt.Rows.Count > 0)
this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>set_txtSelectFileName('" + dt.Rows[0][0] + "');</script>");
else
this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>set_txtSelectFileName('');</script>");
}
/// <summary>
/// 上传
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void butupFile_ServerClick(object sender, EventArgs e)
{
try
{
FileUpload1.SaveAs(GetPhysicsPath + FileUpload1.FileName);
BinderRepeater();
}
catch (Exception ex)
{
Alert(ex.Message);
}
}
/// <summary>
/// 删除
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void butDeleteFile_ServerClick(object sender, EventArgs e)
{
try
{
File.Delete(GetPhysicsPath + this.txtSelectFileName.Text.Trim());
BinderRepeater();
}
catch (Exception ex)
{
Alert(ex.Message);
}
}
}
}