图片预览器

article/2025/8/24 8:26:36

此预览器,一次只能翻页十张图片,开发人员可根据自己需要,修改前台代码。

==============================页面代码

 

<%@ 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);
            }
        }
    }
}


http://chatgpt.dhexx.cn/article/gAgFdga4.shtml

相关文章

v-viewer图片预览

安装 npm install v-viewer引入 import Viewer from v-viewer import viewerjs/dist/viewer.css Vue.use (Viewer, {defaultOptions: {navbar: true,toolbar: false,movable: false,title: false,zoomable: true,scalable: true,transition: true} })使用 方法一&#xff1a…

vue2图片预览插件

文章目录 学习链接准备工作准备图片与基础的样式PrevImg.vueApp.vue静态效果 封装插件修改PrevImg.vue定义插件逻辑main.js中应用此插件App.vue中使用此插件 图片预览列表修改App.vue修改插件逻辑修改PrevImg.vue 学习链接 vue插件开发实例-图片预览插件 vue2-pre-img-plugin的…

vue 图片预览插件

vue 图片预览插件 步骤 1、先安装依赖 npm install v-viewer --save2、main.js内引用并注册调用 //main.js import Viewer from v-viewer import viewerjs/dist/viewer.cssVue.use(Viewer); Viewer.setDefaults({Options: { "inline": true, "button": …

Vue3图片预览(Image)

本图片预览组件主要包括以下功能&#xff1a; 展示图片时&#xff0c;可设置鼠标悬浮时的预览文本&#xff1b;图像无法加载时要显示的描述&#xff1b;自定义图像高度和宽度&#xff1b;设置图像如何适应容器高度和宽度&#xff08; fill(填充) | contain(等比缩放包含) | cov…

Vue实现图片预览和缩放功能

使用v-viewer插件即可实现图片预览和缩放功能。&#xff08;v-viewer是一款支持vue项目中的图片浏览组件&#xff0c;它支持图片旋转、缩放、翻转等操作&#xff0c;支持配置化.非常强大&#xff09; 安装依赖 执行命令&#xff1a; npm install v-viewer --save 引入并使用…

图片上传预览功能

大多时候我们上传图片&#xff0c;都是直接上传到服务器上&#xff0c;然后返回图片资源所在服务器的路径&#xff0c;然后页面根据这个路径&#xff0c;给图片一个src 属性就能看到图片了。 但是&#xff0c;这样会有一个弊端&#xff1a;如果客户对自己上传的图片不满意&am…

uniapp 图片预览实现

uniapp 图片预览实现 提示&#xff1a;下面案例可供参考 一、app端 使用 uni.previewImage 进行图片预览 可去 uniapp官网 查看具体使用:(https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject) 二、具体使用如下&#xff08;示例&#xff09;&#xf…

Android中点击图片进行图片预览功能的实现(ImagePreview图片预览工具库)

因为需求&#xff0c;对于轮播图进行一个点击预览的功能&#xff0c;看了好多的文章&#xff0c;都没有弄出来&#xff0c;还是多亏了昊昊猿博主 点击查看原文 终于把它搞定啦。 这里的话是使用ImagePreview&#xff0c;一个非常好用的图片预览工具库&#xff08;还可以实现双…

Vue实现图片预览(Viewer.js)

Viewer.js viewer.js是一款开源的图片预览插件&#xff0c;功能十分强大: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转&#xff08;类似微博的图片旋转&#xff09; 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式&#xff08;可做屏保&#xff0…

前端图片预览怎么做?Vue

选择的图片文件&#xff0c;要给到img标签上纯前端的预览 让用户更近一步看到自己选择的头像 因为img的标签的src的值只能是以下两个 1、只能是图片的“链接地址”&#xff08;外链http://开头&#xff0c;图片文件相对路径&#xff09;(不能发给后台)因为第一种转成http是存…

点击图片实现大图预览

实现点击图片预览 这次主要是在table表格里能够实现&#xff0c;点击里面的图片实现大图预览的效果&#xff0c;直接找的现成的轮子&#xff0c;用在项目里。这里主要是讲讲用viewer组件实现点击图片预览&#xff0c;用的组件&#xff0c;只需在本地安装或者引入。 先看一下&…

ImagePreview 图片预览 的使用​

一、ImagePreview 图片预览 的使用 ImagePreview 是一个函数&#xff08;必须使用按需到处&#xff09;&#xff0c;调用函数后会直接在页面中展示图片预览界面。 // 实现图片预览 import { ImagePreview } from vant 二、处理图片点击预览 思路&#xff1a; 1、从文章内容中…

图片预览(原生js实现)

功能描述 很多网站都是使用浏览器自带图片浏览功能&#xff0c;但看起来很low&#xff0c;想手动实现图片预览功能&#xff0c;点击图片弹出大图预览框在屏幕中间显示&#xff0c;根据图片宽高自适应屏幕大小 效果图 具体代码实现 页面preview.html <!DOCTYPE html> …

图片预览的两种实现方式

做用户头像上传等类似功能的时候&#xff0c;经常会有预览选中图片的需求。在这里介绍两种实现预览的方式。 1.转化为base64格式 通过一种异步文件读取机制FileReader实现。具体步骤是&#xff1a; 创建FileReader对象调用readAsDataURL函数读取文件内容监听FileReader创建的…

CVTE 面试的两道算法题

下了班立马赶往深圳北站&#xff0c;下着大雨又坐过了站&#xff0c;着急地跑向对面的站牌&#xff0c;匆忙间搞得满头大汗。好不容易坐上了高铁&#xff0c;休息片刻&#xff0c;终于有时间整理一下前两天面试CVTE 时遇到的两道算法题。 1. 在数组中寻找和为固定值的两个数字…

CVTE实习求职经历

今天&#xff0c;听到有好多同学最近要去面试CVTE这家企业&#xff0c;于是呢&#xff0c;准备将自己的经历写上来&#xff0c;给大家一个参考&#xff0c;希望能够大家一次帮助。 一、整体感觉 首先呢&#xff0c;先讲一下我个人对这家企业的整体感觉吧。 1. 第一次 对于CVTE这…

CVTE 2016 春季实习校招一面(C++后台)

文章目录 前言问题小结参考文献 前言 2016-03-15 日&#xff0c;参加了 CVTE 的技术一面&#xff0c;很不幸&#xff0c;我和我的两位小伙伴均跪在了一面。先将当日的面试内容汇总如下&#xff0c;供后来者参考。我们三人各自也都总结了失败的原因&#xff0c;大致如下&#x…

CVTE2019校招笔试

在vector中删除元素时&#xff0c;指向被删除元素和它后面元素的迭代器都失效了&#xff1b;如果添加一个元素&#xff0c;可能导致所有内容重新分配&#xff0c;所有迭代器均失效。因此在循环中使用erase操作时&#xff0c;要特别注意。不过erase删除元素后会返回一个迭代器指…

CVTE C++软开全程面试(一面、二面、群面、HR面)

一面&#xff0c;面了一个钟&#xff0c;问了很多问题&#xff0c;大部分是计算机的基础知识&#xff0c;我也只能记录下一部分。 C的继承问题&#xff0c;protected成员被public、protected和private继承的情况。 下面是关于protected成员在不同类型继承中的访问权限&#xff…

2015 CVTE校招网测部分试题(技术类)

CVTE的网测题分为技术题与行测题&#xff0c;都非常基础非常简单&#xff0c;但也有较难的题目&#xff0c;下面这些题都是我当时觉得稍有些难或容易答错或值得进一步推敲的题&#xff0c;现在分享出来&#xff0c;大家可以对着知识点做下&#xff0c;不会的Google&#xff0c;…