上传多个图片,并生成缩略图预览

最新推荐文章于 2021-06-05 01:59:59 发布

转载最新推荐文章于 2021-06-05 01:59:59 发布 · 1.8k 阅读

文章标签：

#server #button #div #filter #function #asp

Asp.Net [C#] 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一个使用ASP.NET实现的多图片上传和实时预览功能。通过客户端JavaScript进行格式验证，并在服务器端处理文件上传，实现了对上传图片的即时预览效果。

HTML///////////////////////////////////////////////////////

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>无标题页</title>
</head>
<body>
<script language="javascript">
    function $(o){return document.getElementById(o);}
    function CheckImgCss(o,img)
    {
        if (!//.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value))
        {
            alert('只能上传jpg,bmp,gif,png格式图片!');
            o.outerHTML = o.outerHTML;
        }
        else
        {
            $(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value;
            //$('Image1').src = o.value;//这里IE7已经不支持了。所以才有上面的方法。
            setTimeout("setImg(document.all.Div1)",100);
            setTimeout("setImg(document.all.Div2)",100);
            setTimeout("setImg(document.all.img)",100);
        }
    }

    function setImg(o)
    {
        var width_img;
        var height_img;

        o.style.visibility = "visible";
        width_img=o.offsetWidth;
        height_img=o.offsetHeight;

var width=274; //预定义宽
var height=100; //预定义高

        var ratW; //宽的缩小比例
        var ratH; //高的缩小比例
        var rat; //实际使用的缩小比例
        if(width_img<width && height_img<height)
        {
        //如果比预定义的宽高小，原图显示。
        o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
        return;

        }else{
        //如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
        o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";

        }
        ratH=height/height_img;
        ratW=width/width_img;
        if(ratH<ratW) //选择最小的作为实际的缩小比例
        rat=ratH;
        else
        rat=ratW;

        width_img=width_img * rat;
        height_img=height_img * rat;
        alert(width_img + "," + height_img)
        o.style.width=width_img;
        o.style.height=height_img;
    }
</script>

    <form id="form1" runat="server">
    <div><h1>一次上传多个图片并预览，请选择图片：</h1>
        <asp:FileUpload ID="FileUpload1" onchange="CheckImgCss(this, 'img');" runat="server" />
        <asp:FileUpload ID="FileUpload2" onchange="CheckImgCss(this, 'Div1');" runat="server" />
        <asp:FileUpload ID="FileUpload3" onchange="CheckImgCss(this, 'Div2');" runat="server" />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="上传" />
        <div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic%>,sizingMethod=scale);width:102px;height:100px;"></div>
        <div id="Div1" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic%>,sizingMethod=scale);width:102px;height:100px;"></div>
        <div id="Div2" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic%>,sizingMethod=scale);width:102px;height:100px;"></div>
     </div>

    </form>
</body>
</html>

aspx.cs//////////////////////////////////

using System;
using System.Data;
using System.Configuration;
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;

public partial class _Default : System.Web.UI.Page
{

    public string pic = "logo.gif";
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Random r = new Random();

        for (int i = 0; i < Request.Files.Count; i++)
        {
            if (Request.Files[i].ContentLength > 0)
            {
                string ex = System.IO.Path.GetExtension(Request.Files[i].FileName).ToLower();
                if (".jpg.gif.png.bmp".Contains(ex))
                {
                    string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + r.Next(100, 999).ToString() + ex;
                    //保存文件名到数据库

                    Request.Files[i].SaveAs(Server.MapPath(newFileName));
                    pic = newFileName;
                    Response.Write(r.Next(100, 999).ToString());
                }
            }
        }
    }
}