批量上传不同图片

原创 于 2008-05-21 21:06:00 发布 · 1.3k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#input #button #function #file #div
#url
本文介绍了一个基于163上传控件的ASP.NET Web应用程序实现，该控件允许用户上传多个文件，并预览已选择的图片。文章详细解释了如何通过JavaScript处理文件上传事件，确保每个文件都是唯一的图片，并在网页上即时显示预览效果。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="163上传控件.aspx.cs" Inherits="mytest_163上传控件"
    Debug="true" %>

<!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>163上传</title>
    <style type="text/css">  
    a.addfile   { 
        background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif); 
        background-repeat:no-repeat; 
        background-position:-915px   -17px; 
        display:block; 
        float:left; 
        height:20px; 
        margin-top:-1px; 
        position:relative; 
        text-decoration:none; 
        top:0pt; 
        width:80px; 
    } 
     
    input.addfile   { 
        cursor:pointer   !important; 
        height:18px; 
        left:-13px; 
        filter:alpha(opacity=0);   
        position:absolute; 
        top:5px; 
        width:1px; 
        z-index:   -1; 
    } 
    img.addfile {
        background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif); 
        background-repeat:no-repeat; 
        background-position:-802px   -36px; 
        width:13px;
        height:13px;
    }
</style>

    <script type="text/javascript"> 
    window.$ = document.getElementById;
    var fileNumber = 0;
    function createnew()
    {
        if ( IsExist(this.value))
        {
            var father = this.parentNode;
            while(father.firstChild)
            {
                father.removeChild(father.firstChild);
            }
            var newf = document.createElement("input");
            newf.type = this.type;
            newf.name = this.name;
            newf.className = this.className;
            newf.runat = this.runat;
            newf.onchange = this.onchange;
            father.appendChild(newf);
            alert("请不要上传相同图片！");
            return;
        }
        
        var c_a = $('container1');// 找到上传控件的a容器
        var c_div = $('container2');// 放置图片的容器
        var fileCtr = c_a.firstChild;// 上传控件
        
        var subDiv = document.createElement("div");// 将放置到c_div中的容器
        var img1 = document.createElement("img");// 上传的图片
        img1.src = "file://"+fileCtr.value;
        img1.style.width = "30px";
        img1.style.height = "30px";
        img1.onerror = function(){
            alert("请上传图片!");
            var father = this.parentNode;
            var gfather = father.parentNode;
            father.removeChild(this);
            gfather.removeChild(father);
        }
        
        var img2 = document.createElement("img");// 删除图片按钮
        img2.className = "addfile";
        img2.onclick = function(){this.parentNode.parentNode.removeChild(this.parentNode)}
        
        subDiv.appendChild(img1);
        subDiv.appendChild(img2);        
        subDiv.appendChild(fileCtr);        
        
        
        c_div.appendChild(subDiv);
        
        fileNumber++;
        
        var newFileCtr = document.createElement("input");
        newFileCtr.type = "file";
        newFileCtr.className = "addfile";
        newFileCtr.runat = "server";
        newFileCtr.name = "file_"+fileNumber;
        newFileCtr.onchange = createnew;
        while(c_a.firstChild)
        {
            c_a.removeChild(c_a.firstChild);
        }
        
        c_a.appendChild(newFileCtr);
    }   
    // 相同文件控制
    function IsExist(name1)
    {
        var upfiles = document.getElementsByTagName("input");
        var n=0;
        for(var i=0; i<upfiles.length;i++)
        {
            var file = upfiles[i];
            if ( file.type == "file" && file.value==name1)
            {
                n++;
            }
            if ( n > 1 )//找到两个
            {
                return true;
            }
        }
        return false;
    } 
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a id="container1" class="addfile">
                <input name="file_0" type="file" class="addfile"  onchange="createnew();" runat="server" />
            </a>
        </div>
        <div id="container2" style="position:relative; float:left; ">
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </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;

public partial class mytest_163上传控件 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        string s = "上传图片有：";
        for(int i=0;i<Request.Files.Count;i++)
        {
            s += Request.Files[i].FileName + " ";
        }
        Response.Write(s);
    }
}
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值