最近,有好些网友问到类似的问题,我于是就做了个简单的例子,相信大家一看就明白。
有一点说明的是:对于file控件,必须点击他本身才可能完成对文件的上传,通过脚本打开选择文件对话框以后是无法再上传文件的,这也许是基于安全的考虑,即必须用户本人主观去上传本机的文件,否则本机文件有可能被脚本恶决上传。
我这里只充许上传jpg和gif图片,当然你可以根据需要自己修改。
请看示例:
view plaincopy to clipboardprint?
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="UpFile.aspx.cs" Inherits="csdn.UI.UpFile" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>文件列表</title>
<mce:style><!--
.attach
{
height:10px;
border-left:solid 1px white;
border-right:solid 1px gray;
border-top:solid 1px white;
border-bottom:solid 1px gray;
background-color:#eeeef1;
padding:0px;
}
.divFileInfo
{
width:400px;
border:dotted 1px orange;
height:150px;
}
.spText
{
position:relative;
bottom:3px;
padding-left:5px;
padding-right:5px;
}
.myhelp
{
padding-left:0px;
}
.myhelp li
{
list-style:none;
line-height:22px;
padding-left:0px;
}
.divupload
{
font-size:12px;
width:400px;
background-color:White;
border:solid 1px #336699;
padding:10px;
margin:auto;
margin-top:100px;
}
td
{
font-family:@Tahoma;
}
.aclose
{
color:blue;
}
.aclose:hover
{
color:red;
}
body
{
margin:0;
font-size:12px;
}
HTML,BODY,FORM
{
height:100%;
}
.inputfile
{
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
top:1px;
width:1px;
}
.fileparent
{
background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);
background-repeat:no-repeat;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
--></mce:style><style mce_bogus="1"> .attach
{
height:10px;
border-left:solid 1px white;
border-right:solid 1px gray;
border-top:solid 1px white;
border-bottom:solid 1px gray;
background-color:#eeeef1;
padding:0px;
}
.divFileInfo
{
width:400px;
border:dotted 1px orange;
height:150px;
}
.spText
{
position:relative;
bottom:3px;
padding-left:5px;
padding-right:5px;
}
.myhelp
{
padding-left:0px;
}
.myhelp li
{
list-style:none;
line-height:22px;
padding-left:0px;
}
.divupload
{
font-size:12px;
width:400px;
background-color:White;
border:solid 1px #336699;
padding:10px;
margin:auto;
margin-top:100px;
}
td
{
font-family:@Tahoma;
}
.aclose
{
color:blue;
}
.aclose:hover
{
color:red;
}
body
{
margin:0;
font-size:12px;
}
HTML,BODY,FORM
{
height:100%;
}
.inputfile
{
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
top:1px;
width:1px;
}
.fileparent
{
background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);
background-repeat:no-repeat;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
</style>
<base target="_self" />
</head>
<body>
<form id="Form1" method="post" runat="server">
<input type="hidden" id="hidIds" runat="server">
<div id="divupload" class="divupload">
<div>
<ul class="myhelp">
<li>说明:</li>
<li>1、点击“添加图片”可以添加多个图片文件。</li>
<li>3、点击“上传“可以将添加的图片批量上传到我的图片库。 </li>
</ul>
</div>
<a id="divFileParent" class="fileparent" hidefocus="true" href="javascript:void(1==1);" mce_href="javascript:void(1==1);">
<input type="file" id="file1" size="1" class="inputfile" runat="server" οnchange="javascript:SetValue(this)" />
</a>
<br />
<div id="divFileInfo" class="divFileInfo">
</div>
<div id="divFileList">
</div>
<br />
<div style="text-align: center" mce_style="text-align: center">
<asp:Button ID="Button1" runat="server" CssClass="btn80" Text="上传" OnClientClick="javascript:return DoConfirmUp();"
OnClick="btnUpLoad"></asp:Button>
<input type="button" value="取消" class="btn" οnclick="javascript:HideUpLoad();" />
</div>
</div>
</form>
<mce:script language="javascript"><!--
String.prototype.Trim=function()
{
return this.replace(/(^/s*)|(/s*$)/g,"");
}
var gFileCount = 1;
var gFileNameIndex = 1;//命名用的。只增不减,少免重复。
var aryFileName = new Object();
function SetValue(file)
{
if(file.value.Trim() == "") return;
var div = document.createElement("span");
var ary = file.value.split("//");
var filename = ary[ary.length-1];
var extAry = filename.split('.');
if(extAry[extAry.length-1].toLowerCase() != "jpg"
&& extAry[extAry.length-1].toLowerCase() != "jpeg"
)
{
alert("只能是jpeg文件!");
return;
}
if (aryFileName[filename] == 1)
{
alert("该文件已经在附件中!");
file.parentNode.removeChild(file);//要不然有可能不能触发onchange
CreateFile();
return;
}
aryFileName[filename] = 1;
$("divFileList").appendChild(file);
div.innerHTML = "<img src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" ><span class='spText'>"+filename+"</span><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" fileid='"+file.id
+"' title='删除附件' filename='"+filename+"' style="cursor:pointer" mce_style="cursor:pointer" οnclick='javascripot:GoDeleteFile(this)'>";
div.className = "attach";
file.style.display = "none";
$("divFileInfo").appendChild(div);
CreateFile();
}
function $(id){return document.getElementById(id)}
function DoConfirmUp()
{
if(gFileCount ==1)
{
alert("请选择附件!");
return false;
}
return confirm("确定要上传所选中的附件吗?");
}
function GoDeleteFile(img)
{
var fileid = img.getAttribute("fileid");
var file = $(fileid);
if(file !=null)
{
$("divFileList").removeChild(file);
}
img.parentNode.parentNode.removeChild(img.parentNode);
var filename = img.getAttribute("filename");
aryFileName[filename] = null;
gFileCount -- ;
}
function CreateFile()
{
gFileCount++;
gFileNameIndex ++; //合
var file = document.createElement("INPUT");
file.type = "file";
file.id = "file"+gFileNameIndex;
filefile.name = file.id;
file.className = "inputfile";
$("divFileParent").appendChild(file);
file.onchange = function()
{
SetValue(file);
}
}
function CheckValue(context,result)
{
var v = $("txtName").value;
vv = v.toLowerCase();
var reg = new RegExp("/.(jpg|bmp|gif|png)$");
reg.ignoreCase = true;
if(reg.exec(v) == null)
{
result.IsValid = false;
}else
{
result.IsValid = true;
}
}
// --></mce:script>
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="UpFile.aspx.cs" Inherits="csdn.UI.UpFile" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>文件列表</title>
<mce:style><!--
.attach
{
height:10px;
border-left:solid 1px white;
border-right:solid 1px gray;
border-top:solid 1px white;
border-bottom:solid 1px gray;
background-color:#eeeef1;
padding:0px;
}
.divFileInfo
{
width:400px;
border:dotted 1px orange;
height:150px;
}
.spText
{
position:relative;
bottom:3px;
padding-left:5px;
padding-right:5px;
}
.myhelp
{
padding-left:0px;
}
.myhelp li
{
list-style:none;
line-height:22px;
padding-left:0px;
}
.divupload
{
font-size:12px;
width:400px;
background-color:White;
border:solid 1px #336699;
padding:10px;
margin:auto;
margin-top:100px;
}
td
{
font-family:@Tahoma;
}
.aclose
{
color:blue;
}
.aclose:hover
{
color:red;
}
body
{
margin:0;
font-size:12px;
}
HTML,BODY,FORM
{
height:100%;
}
.inputfile
{
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
top:1px;
width:1px;
}
.fileparent
{
background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);
background-repeat:no-repeat;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
--></mce:style><style mce_bogus="1"> .attach
{
height:10px;
border-left:solid 1px white;
border-right:solid 1px gray;
border-top:solid 1px white;
border-bottom:solid 1px gray;
background-color:#eeeef1;
padding:0px;
}
.divFileInfo
{
width:400px;
border:dotted 1px orange;
height:150px;
}
.spText
{
position:relative;
bottom:3px;
padding-left:5px;
padding-right:5px;
}
.myhelp
{
padding-left:0px;
}
.myhelp li
{
list-style:none;
line-height:22px;
padding-left:0px;
}
.divupload
{
font-size:12px;
width:400px;
background-color:White;
border:solid 1px #336699;
padding:10px;
margin:auto;
margin-top:100px;
}
td
{
font-family:@Tahoma;
}
.aclose
{
color:blue;
}
.aclose:hover
{
color:red;
}
body
{
margin:0;
font-size:12px;
}
HTML,BODY,FORM
{
height:100%;
}
.inputfile
{
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
top:1px;
width:1px;
}
.fileparent
{
background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/addimg.jpg);
background-repeat:no-repeat;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
</style>
<base target="_self" />
</head>
<body>
<form id="Form1" method="post" runat="server">
<input type="hidden" id="hidIds" runat="server">
<div id="divupload" class="divupload">
<div>
<ul class="myhelp">
<li>说明:</li>
<li>1、点击“添加图片”可以添加多个图片文件。</li>
<li>3、点击“上传“可以将添加的图片批量上传到我的图片库。 </li>
</ul>
</div>
<a id="divFileParent" class="fileparent" hidefocus="true" href="javascript:void(1==1);" mce_href="javascript:void(1==1);">
<input type="file" id="file1" size="1" class="inputfile" runat="server" οnchange="javascript:SetValue(this)" />
</a>
<br />
<div id="divFileInfo" class="divFileInfo">
</div>
<div id="divFileList">
</div>
<br />
<div style="text-align: center" mce_style="text-align: center">
<asp:Button ID="Button1" runat="server" CssClass="btn80" Text="上传" OnClientClick="javascript:return DoConfirmUp();"
OnClick="btnUpLoad"></asp:Button>
<input type="button" value="取消" class="btn" οnclick="javascript:HideUpLoad();" />
</div>
</div>
</form>
<mce:script language="javascript"><!--
String.prototype.Trim=function()
{
return this.replace(/(^/s*)|(/s*$)/g,"");
}
var gFileCount = 1;
var gFileNameIndex = 1;//命名用的。只增不减,少免重复。
var aryFileName = new Object();
function SetValue(file)
{
if(file.value.Trim() == "") return;
var div = document.createElement("span");
var ary = file.value.split("//");
var filename = ary[ary.length-1];
var extAry = filename.split('.');
if(extAry[extAry.length-1].toLowerCase() != "jpg"
&& extAry[extAry.length-1].toLowerCase() != "jpeg"
)
{
alert("只能是jpeg文件!");
return;
}
if (aryFileName[filename] == 1)
{
alert("该文件已经在附件中!");
file.parentNode.removeChild(file);//要不然有可能不能触发onchange
CreateFile();
return;
}
aryFileName[filename] = 1;
$("divFileList").appendChild(file);
div.innerHTML = "<img src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/jpg.gif" ><span class='spText'>"+filename+"</span><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" mce_src="https://p-blog.csdn.net/images/p_blog_csdn_net/cpp2017/EntryImages/20090806/tabclosesel.jpg" fileid='"+file.id
+"' title='删除附件' filename='"+filename+"' style="cursor:pointer" mce_style="cursor:pointer" οnclick='javascripot:GoDeleteFile(this)'>";
div.className = "attach";
file.style.display = "none";
$("divFileInfo").appendChild(div);
CreateFile();
}
function $(id){return document.getElementById(id)}
function DoConfirmUp()
{
if(gFileCount ==1)
{
alert("请选择附件!");
return false;
}
return confirm("确定要上传所选中的附件吗?");
}
function GoDeleteFile(img)
{
var fileid = img.getAttribute("fileid");
var file = $(fileid);
if(file !=null)
{
$("divFileList").removeChild(file);
}
img.parentNode.parentNode.removeChild(img.parentNode);
var filename = img.getAttribute("filename");
aryFileName[filename] = null;
gFileCount -- ;
}
function CreateFile()
{
gFileCount++;
gFileNameIndex ++; //合
var file = document.createElement("INPUT");
file.type = "file";
file.id = "file"+gFileNameIndex;
file.name = file.id;
file.className = "inputfile";
$("divFileParent").appendChild(file);
file.onchange = function()
{
SetValue(file);
}
}
function CheckValue(context,result)
{
var v = $("txtName").value;
v = v.toLowerCase();
var reg = new RegExp("/.(jpg|bmp|gif|png)$");
reg.ignoreCase = true;
if(reg.exec(v) == null)
{
result.IsValid = false;
}else
{
result.IsValid = true;
}
}
// --></mce:script>
后台只是为了验证文件是否上传,至于保存相当简单就不多写了。
view plaincopy to clipboardprint?
protected void btnUpLoad(object sender, EventArgs e)
{
for (int i = 0; i < Request.Files.Count; i++)
{
Response.Write(Request.Files[i].FileName+"<BR>");
//Request.Files[i].SaveAs(Path);如果要保存
}
}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/cpp2017/archive/2009/08/07/4418202.aspx