<HTML>
<HEAD>
<script type="text/javascript">var i = 0; // 用来动态生成span,upfile的id
function addAttachmentToList()
{
if (findAttachment(event.srcElement.value)) return; //如果此文档已在附件列表中则不再添加
// 动态创建附件信息栏并添加到附件列表中
var span = document.createElement('span');
span.id = '_attachment' + i;
span.innerHTML = extractFileName(event.srcElement.value) + ' <a href="javascript:delAttachment(' + (i++) + ')"><font color="blue">删除</font></a><br/>';
span.title = event.srcElement.value;
G('attachmentList').appendChild(span);
// 显示附件列表并变换添加附件按钮文本
if (G('attachmentList').style.display == 'none')
{
G('btnAdd').value = '继续添加';
G('attachmentList').style.display = '';
G('btnClear').style.display = '';
} G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';
}function selectAttachment()
{
// 先清除无效动态生成的多余upfile
cleanInvalidUpfile();
// 动态创建上传控件并与span对应
var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+i+'">';
document.body.insertAdjacentHTML('beforeEnd', upfile);
G('_upfile'+i).click();
}function extractFileName(fn)
{
return fn.substr(fn.lastIndexOf('\\')+1);
}function findAttachment(fn)
{
var o = G('attachmentList').getElementsByTagName('span');
for(var i=0;i<o.length;i++)
if (o[i].title == fn) return true;
return false;
}function delAttachment(id)
{
G('attachmentList').removeChild(G('_attachment'+id));
document.body.removeChild(G('_upfile'+id));
// 当附件列表为空则不显示并且变化添加附件按钮文本
if (G('attachmentList').childNodes.length == 0)
{
G('btnAdd').value = '添加附件';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
}
G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';
}function cleanInvalidUpfile()
{
var o = document.body.getElementsByTagName('input');
for(var i=o.length-1;i>=0;i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
{
if (!G('_attachment'+o[i].id.substr(7)))
document.body.removeChild(o[i]);
}
}function clearAttachment()
{
var o = G('attachmentList').childNodes;
for(var i=o.length-1;i>=0;i--)
G('attachmentList').removeChild(o[i]); o = document.body.getElementsByTagName('input');
for(var i=o.length-1;i>=0;i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
{
document.body.removeChild(o[i]);
} G('btnAdd').value = '添加附件';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
G('total').innerText = '当前选择上传0个附件';
}function getAttachmentInfo()
{
// 已知的js获取本地文件大小的三种方式
// 1.通过FSO 2.通过ActiveX 3.通过Flash(设置可能更麻烦)与js交互
// 注:QQ邮箱中获取本地文件大小就是采用第二种方式
}function G(id)
{
return document.getElementById(id);
}</script>
</HEAD>
<BODY>
<fieldset style="border : 1px solid #84A24A;text-align:left;COLOR:#84A24A;FONT-SIZE:
12px;font-family: Verdana;padding:5px;">
<legend>模仿QQ邮箱添加附件</legend>
<input type="button" value="添加附件" id="btnAdd" onclick="selectAttachment();"> <input type="button" value="清空附件" id="btnClear" style="display:none" onclick="clearAttachment();">
<div id="attachmentList" style="margin:3px 0px 0px 0px;padding:4px 3px 4px 3px;background-color:#DEEBC6;display:none;border:1px solid #84A24A;">
</div>
<div id="total" style="margin:3px 0px 0px 0px;">当前选择上传0个附件</div>
</fieldset>
</BODY>
</HTML>页面代码复制以后可以实现效果但是我在后台使用
HttpFileCollection myfiles = HttpContext.Current.Request.Files; 获取的时候老是取不到值
<HEAD>
<script type="text/javascript">var i = 0; // 用来动态生成span,upfile的id
function addAttachmentToList()
{
if (findAttachment(event.srcElement.value)) return; //如果此文档已在附件列表中则不再添加
// 动态创建附件信息栏并添加到附件列表中
var span = document.createElement('span');
span.id = '_attachment' + i;
span.innerHTML = extractFileName(event.srcElement.value) + ' <a href="javascript:delAttachment(' + (i++) + ')"><font color="blue">删除</font></a><br/>';
span.title = event.srcElement.value;
G('attachmentList').appendChild(span);
// 显示附件列表并变换添加附件按钮文本
if (G('attachmentList').style.display == 'none')
{
G('btnAdd').value = '继续添加';
G('attachmentList').style.display = '';
G('btnClear').style.display = '';
} G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';
}function selectAttachment()
{
// 先清除无效动态生成的多余upfile
cleanInvalidUpfile();
// 动态创建上传控件并与span对应
var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+i+'">';
document.body.insertAdjacentHTML('beforeEnd', upfile);
G('_upfile'+i).click();
}function extractFileName(fn)
{
return fn.substr(fn.lastIndexOf('\\')+1);
}function findAttachment(fn)
{
var o = G('attachmentList').getElementsByTagName('span');
for(var i=0;i<o.length;i++)
if (o[i].title == fn) return true;
return false;
}function delAttachment(id)
{
G('attachmentList').removeChild(G('_attachment'+id));
document.body.removeChild(G('_upfile'+id));
// 当附件列表为空则不显示并且变化添加附件按钮文本
if (G('attachmentList').childNodes.length == 0)
{
G('btnAdd').value = '添加附件';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
}
G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';
}function cleanInvalidUpfile()
{
var o = document.body.getElementsByTagName('input');
for(var i=o.length-1;i>=0;i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
{
if (!G('_attachment'+o[i].id.substr(7)))
document.body.removeChild(o[i]);
}
}function clearAttachment()
{
var o = G('attachmentList').childNodes;
for(var i=o.length-1;i>=0;i--)
G('attachmentList').removeChild(o[i]); o = document.body.getElementsByTagName('input');
for(var i=o.length-1;i>=0;i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
{
document.body.removeChild(o[i]);
} G('btnAdd').value = '添加附件';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
G('total').innerText = '当前选择上传0个附件';
}function getAttachmentInfo()
{
// 已知的js获取本地文件大小的三种方式
// 1.通过FSO 2.通过ActiveX 3.通过Flash(设置可能更麻烦)与js交互
// 注:QQ邮箱中获取本地文件大小就是采用第二种方式
}function G(id)
{
return document.getElementById(id);
}</script>
</HEAD>
<BODY>
<fieldset style="border : 1px solid #84A24A;text-align:left;COLOR:#84A24A;FONT-SIZE:
12px;font-family: Verdana;padding:5px;">
<legend>模仿QQ邮箱添加附件</legend>
<input type="button" value="添加附件" id="btnAdd" onclick="selectAttachment();"> <input type="button" value="清空附件" id="btnClear" style="display:none" onclick="clearAttachment();">
<div id="attachmentList" style="margin:3px 0px 0px 0px;padding:4px 3px 4px 3px;background-color:#DEEBC6;display:none;border:1px solid #84A24A;">
</div>
<div id="total" style="margin:3px 0px 0px 0px;">当前选择上传0个附件</div>
</fieldset>
</BODY>
</HTML>页面代码复制以后可以实现效果但是我在后台使用
HttpFileCollection myfiles = HttpContext.Current.Request.Files; 获取的时候老是取不到值
表单有没有设置 enctype="multipart/form-data"
http://dotnet.aspx.cc/article/58ea3515-36f2-4fd9-ac89-eaf49f59816c/read.aspx
http://dotnet.aspx.cc/article/00a69edd-2372-4c9e-940c-5f2003a91b61/read.aspx2种方法