如何在HTM文件中显示多个图像?

时间:2014-10-29 22:54:59

标签: c# html image

我知道如何显示多张图片,但我的意思是我将要展示的方法。我有一个项目,我从下拉列表中选择一个摄像头,然后将转到一个新页面并显示图像。但是现在我想将所有4个摄像头放在一个页面上,但我正在做的方式我只知道如何显示一个图像。

这是我当前的代码:图像处理程序

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace MultiImagesImageHandler
{
/// <summary>
/// Summary description for ImgHandler
/// </summary>
public class ImgHandler : IHttpHandler
{
    static public string filename { get; set; }

    public void ProcessRequest(HttpContext context)
    {
        string saveTo = filename;
        FileStream writeStream1 = new FileStream(saveTo, FileMode.OpenOrCreate, FileAccess.ReadWrite);
        string loadFrom = filename;
        using (FileStream fs1 = File.Open(loadFrom, FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite))
        {
            ReadWriteStream(fs1, writeStream1);
        }
        byte[] tt = File.ReadAllBytes(context.Server.MapPath("~/images/"+filename));
        context.Response.ContentType = "image/jpeg";
        context.Response.BinaryWrite(tt);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    // readStream is the stream you need to read
    // writeStream is the stream you want to write to
    private void ReadWriteStream(Stream readStream, Stream writeStream)
    {
        int Length = 256;
        Byte[] buffer = new Byte[Length];
        int bytesRead = readStream.Read(buffer, 0, Length);
        // write the required bytes
        while (bytesRead > 0)
        {
            writeStream.Write(buffer, 0, bytesRead);
            bytesRead = readStream.Read(buffer, 0, Length);
        }
        readStream.Close();
        writeStream.Close();
    }
}
}

HTM文件的代码:

<!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>
   <title>Image 1</title>
   <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   <script type="text/javascript" language="JavaScript">
    function refreshIt() {
        if (!document.images) return;
        document.getElementById("imgcontainer2").src = "/ImgHandler.ashx?" + Math.random();
        setTimeout('refreshIt()', 700);
    }
   </script>
 </head>
 <body onload=" setTimeout('refreshIt()',700)">
 <img id="imgcontainer2" src="/ImgHandler.ashx" alt="cam image2"/>
 </body>
 </html>

我无法想象如何更改它以显示多于一张图像。如果有人可以提供帮助,我将不胜感激。如果需要更多信息,请告诉我。

0 个答案:

没有答案