批量上传不同图片

<% @ 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 >
            
< 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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值