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