110,536
社区成员
发帖
与我相关
我的任务
分享模拟126邮箱实现附件上传
在实现附件上传的过程中，前台js功能是写好了，但用HttpFileCollection files = HttpContext.Current.Request.Files 获取时files.Count总为0，得不到生成的files文件的文件？
file表单域是通过js动态生成的，放在一个隐藏的DIV中，通过用alert调试能查看到该DIV 的outerHTML代码，不知道为什么获取不到？？？
生存file的代码如下：
//创建一个file input对象并返回
function newFileInput(_name){
var oFileInput = document.createElement("input");
oFileInput.type = "file";
oFileInput.setAttribute("id",_name);
oFileInput.outerHTML = '<input type="file" id="' + _name + ' name="' + _name + '>';
return oFileInput;
}
网友说要在file 里要加name属性，但一旦加了就要点击（“附件数”+1） 次保存按钮，很郁闷，请问哪位兄台能帮我解决，非常感激！
file表单域是通过js动态生成的，放在一个隐藏的DIV中，通过用alert调试能查看到该DIV 的outerHTML代码，不知道为什么获取不到？？？
生存file的代码如下：
//创建一个file input对象并返回
function newFileInput(_name){
var oFileInput = document.createElement("input");
oFileInput.type = "file";
oFileInput.setAttribute("id",_name);
oFileInput.outerHTML = '<input type="file" id="' + _name + ' name="' + _name + '>';
return oFileInput;
}
网友说要在file 里要加name属性，但一旦加了就要点击（“附件数”+1） 次保存按钮，很郁闷，请问哪位兄台能帮我解决，非常感激！
...全文
请发表友善的回复…
发表回复
wanna51 2007-10-25
- 打赏
- 举报
回复上面说的：
这是根本解决不了的问题。
File控件比较特殊，必须经过用户点击选择文件。
所有网络上提供的“解决方法”都是扯淡，都是能看着文本框里面有路径，但是传不上去的。
任何方法都解决不了的，否则对方打开你网页，岂不是什么文件你都可以秘密获得？？
已经用iframe方式解决了，不用点file控件就可以上传了。
http://wanna51.blog.163.com/blog/static/2156036200792501350641/
这是根本解决不了的问题。
File控件比较特殊，必须经过用户点击选择文件。
所有网络上提供的“解决方法”都是扯淡，都是能看着文本框里面有路径，但是传不上去的。
任何方法都解决不了的，否则对方打开你网页，岂不是什么文件你都可以秘密获得？？
已经用iframe方式解决了，不用点file控件就可以上传了。
http://wanna51.blog.163.com/blog/static/2156036200792501350641/
jonyxx 2007-06-14
- 打赏
- 举报
很道歉，BearRui，上次比较激动一时把你忘了。。。
非常感谢你们的帮助！
非常感谢你们的帮助！
survivortt 2007-06-13
- 打赏
- 举报
<input type="file"/>要放在form标记外,否则提交是就被清空了
lovingkiss 2007-06-13
- 打赏
- 举报
而且，这种模式支持firefox的不多。。
甚至163邮箱源代码都没有符合W3C标志的....呵呵~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
新闻部分就有，呵呵~~W3C就是灵活度太差了。
甚至163邮箱源代码都没有符合W3C标志的....呵呵~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
新闻部分就有，呵呵~~W3C就是灵活度太差了。
lovingkiss 2007-06-13
- 打赏
- 举报
看了一下——后边的代码和zhongbx提供的差不多，前面的
。。。。
<script>
function fGoTo(){
document.getElementById("test").click();
}
</script>
<body>
<a href="javascript:fGoTo()">open file dialog</s>
<input type="file" name="test" id="test" style="display:none">
。。。
这种就是扯淡了——上传不上去的，客户端看着是那么回事，到了服务器就接收不到的。
不管怎么改变外形，用户不点到File框上，你就上传不了文件，这是最基本的原则。
。。。。
<script>
function fGoTo(){
document.getElementById("test").click();
}
</script>
<body>
<a href="javascript:fGoTo()">open file dialog</s>
<input type="file" name="test" id="test" style="display:none">
。。。
这种就是扯淡了——上传不上去的，客户端看着是那么回事，到了服务器就接收不到的。
不管怎么改变外形，用户不点到File框上，你就上传不了文件，这是最基本的原则。
洋溢2016 2007-06-13
- 打赏
- 举报
up
BearRui 2007-06-13
- 打赏
- 举报
JS版本看到的代码，试了下还行：
http://community.csdn.net/Expert/TopicView3.asp?id=5424204
http://community.csdn.net/Expert/TopicView3.asp?id=5424204
lovingkiss 2007-06-13
- 打赏
- 举报
其实明白原理了，怎么弄都有道理的——条条大路通罗马，B/S样式灵活，想怎么弄都可以的。
BearRui 2007-06-13
- 打赏
- 举报
关注，没注意126的改成gmail上传附件一样了，126的一起就是和我的一样的。
gmail的具体实现曾经看过文章，也试过，但没成功。
---------------------------
gmail的具体实现曾经看过文章，也试过，但没成功。
---------------------------
jonyxx 2007-06-13
- 打赏
- 举报
非常lovingkiss及zhongbx仁兄的支持，我先试试
lovingkiss 2007-06-13
- 打赏
- 举报
===================================================
当然，也有变通的方法，就是把控件百分百透明，然后用户点击进入选择界面。
一般用户照片上传，也仅仅解决了该控件不美观的问题。其余的，还是面谈吧
——这是我一开始就说了的法子，现在大多数人的做法也差不多罢了。
我还真以为出了什么新技术呢——原来还不是换汤不换药。
当然，也有变通的方法，就是把控件百分百透明，然后用户点击进入选择界面。
一般用户照片上传，也仅仅解决了该控件不美观的问题。其余的，还是面谈吧
——这是我一开始就说了的法子，现在大多数人的做法也差不多罢了。
我还真以为出了什么新技术呢——原来还不是换汤不换药。
lovingkiss 2007-06-13
- 打赏
- 举报
我说的是原理上
BearRui——不要一直是用就说自己很明白什么的，理论永远凌驾于你的具体编码的。
目前我没有看到过纯脚本控制上传的，126和163差不多一个妈生的，不外乎改装了文本框的外形罢了。
和zhongbx说的，以及我给出的地址，是一个理论延续下来的。
http://www.quirksmode.org/dom/inputfile.html
BearRui——不要一直是用就说自己很明白什么的，理论永远凌驾于你的具体编码的。
目前我没有看到过纯脚本控制上传的，126和163差不多一个妈生的，不外乎改装了文本框的外形罢了。
和zhongbx说的，以及我给出的地址，是一个理论延续下来的。
http://www.quirksmode.org/dom/inputfile.html
lovingkiss 2007-06-13
- 打赏
- 举报
http://www.quirksmode.org/dom/inputfile.html
实际上大家也都是用的折中方法的。BearRui——建议你看看这篇文章。我去跟踪了一下163的Html源代码，实际上去掉了CSS，也是显示了文件上传框，实际上也是把File改装了。
不点File用脚本控制——确实是扯淡的事情。
实际上大家也都是用的折中方法的。BearRui——建议你看看这篇文章。我去跟踪了一下163的Html源代码，实际上去掉了CSS，也是显示了文件上传框，实际上也是把File改装了。
不点File用脚本控制——确实是扯淡的事情。
zhongbx 2007-06-13
- 打赏
- 举报
我也来贴下我写的代码看看，基本上是实现了126的方式，我都在项目中用过好几个地方了,只是我是搞 java 的! .net 内部我就不知道是怎么回事了，反正我实现了，也不知道对lz 有没有用，不管了先贴了再说…… 大家都可以试试看看，要是有搞java 的跟我联系好的，或到我的blog 上去看看，所有的代码 里面都有……
<html><head>
<style>
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
input.addfile {
/*left:-18px;*/
}
input.addfile {
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index: -1;
}
</style>
<script language="javascript" >
var n=0; //初始化数组为0，之后随着化来变化
var fileCount=1; //总共输入了多少个有值的控件 File ,初始化为1
var tempRow=0; //动态表格的临时行
var maxRows=0; //动态表格的临时列
var num = 1; //file 控件数组下标,从1开始,默认显示一个所以那个是 0
var fileCount=1; //整个操作中,总共用了多少个 File 控件
function addFile()
{
var str = '<a href=#? class="addfile" id="a' + num +'"><input type="file" size="50" class="addfile" onchange="addFile()" name="uploadFile[' + num + '].file" ' + '/>'; //待插入的文件控件
var fileText; //得到文件控件的值
var ary; //分割文件,以'\'号
var fileTextValue; //取出最后的文件名
fileText = document.all("uploadFile[" + n + "].file").value;
ary = fileText.split("\\");
fileTextValue = ary[ary.length-1];
document.all("a" + n).style.display = "none"; //将前一个 P 的子元素设为不可见
//在前面一个 File 控件隐藏后,接着再在原来的位置上插入一个
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str);
//这里可以灵活处理
tempRow=fileTable.rows.length-1; //fileTable 就是那个动态的 table 的 ID 了
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=fileTable.rows; //Rows 数组
var newRow=fileTable.insertRow(fileTable.rows.length); //插入新的一行
var Cells=newRow.cells; //Cells 数组
for (i=0;i<3;i++) //每行的2列数据,一列用来显示文件名,一列显示"删除"操作
{
var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
newCell.align="center";
switch (i)
{
case 0 : newCell.innerHTML="<td width='40%' align='left'><span id='"+n+"'></span></td>";break;
case 1 : newCell.innerHTML="<td width='20%' align='left'><a href='javascript:delTableFileRow(\"" +tempRow+ "\",\"" + n + "\")'>删除</a></TD>"; break;
case 2 : newCell.innerHTML="<td width='40%' align='left'> </TD>"; break;
}
}
maxRows+=1;
document.getElementById(n).insertAdjacentText("beforeBegin",fileTextValue);
n++;
num++;
fileCount++;
}
function delTableFileRow(rowNum,fileCount){
if (fileTable.rows.length >rowNum){
fileTable.deleteRow(rowNum); //删除当关行
}else
fileTable.deleteRow(fileTable.rows.length-1);
document.all("MyFile").removeChild(document.all("a" + fileCount)); //从元素P上删除子结点 a 。（跟删除表格行同步）
fileCount--; //总数 -1
}
//http://blog.csdn.net/zhongbx/archive/2007/04/06/1553919.aspx
</script>
</head>
<body>
<form id="kkk" action="/KmZszbfj.do" enctype="multipart/form-data" method="POST">
<table width="900" height="10" border="0" align="center"
cellpadding="0" cellspacing="0" id='tableA'>
<tr>
<td height="27" align="center" bgcolor="#E2F0FE" class="time"><P id="MyFile">
<a href=#? class="addfile" id="a0">
<input type="file" class="addfile" onchange="addFile()" size="1" name="uploadFile[0].file" value=""/>
</a>
</P></td>
<td height="79" align="center" colSpan="3" bgcolor="#E2F0FE" class="time">
<div align="left">
<table width="100%" height="100%" border="0">
<tr><td width="40%" align="left"></td><td width="60%"></td></tr>
<tr>
<td colspan="2">
<table width="100%" border="0" id="fileTable" align="left"></table>
</td>
</table>
</div>
</td>
</tr>
</table>
<P id="btnFile">
<input type="button" name="btnAddFile" value="text html" onclick="javascript:alert(MyFile.innerHTML);"/>
</P>
</body></html>
<html><head>
<style>
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
input.addfile {
/*left:-18px;*/
}
input.addfile {
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index: -1;
}
</style>
<script language="javascript" >
var n=0; //初始化数组为0，之后随着化来变化
var fileCount=1; //总共输入了多少个有值的控件 File ,初始化为1
var tempRow=0; //动态表格的临时行
var maxRows=0; //动态表格的临时列
var num = 1; //file 控件数组下标,从1开始,默认显示一个所以那个是 0
var fileCount=1; //整个操作中,总共用了多少个 File 控件
function addFile()
{
var str = '<a href=#? class="addfile" id="a' + num +'"><input type="file" size="50" class="addfile" onchange="addFile()" name="uploadFile[' + num + '].file" ' + '/>'; //待插入的文件控件
var fileText; //得到文件控件的值
var ary; //分割文件,以'\'号
var fileTextValue; //取出最后的文件名
fileText = document.all("uploadFile[" + n + "].file").value;
ary = fileText.split("\\");
fileTextValue = ary[ary.length-1];
document.all("a" + n).style.display = "none"; //将前一个 P 的子元素设为不可见
//在前面一个 File 控件隐藏后,接着再在原来的位置上插入一个
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str);
//这里可以灵活处理
tempRow=fileTable.rows.length-1; //fileTable 就是那个动态的 table 的 ID 了
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=fileTable.rows; //Rows 数组
var newRow=fileTable.insertRow(fileTable.rows.length); //插入新的一行
var Cells=newRow.cells; //Cells 数组
for (i=0;i<3;i++) //每行的2列数据,一列用来显示文件名,一列显示"删除"操作
{
var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
newCell.align="center";
switch (i)
{
case 0 : newCell.innerHTML="<td width='40%' align='left'><span id='"+n+"'></span></td>";break;
case 1 : newCell.innerHTML="<td width='20%' align='left'><a href='javascript:delTableFileRow(\"" +tempRow+ "\",\"" + n + "\")'>删除</a></TD>"; break;
case 2 : newCell.innerHTML="<td width='40%' align='left'> </TD>"; break;
}
}
maxRows+=1;
document.getElementById(n).insertAdjacentText("beforeBegin",fileTextValue);
n++;
num++;
fileCount++;
}
function delTableFileRow(rowNum,fileCount){
if (fileTable.rows.length >rowNum){
fileTable.deleteRow(rowNum); //删除当关行
}else
fileTable.deleteRow(fileTable.rows.length-1);
document.all("MyFile").removeChild(document.all("a" + fileCount)); //从元素P上删除子结点 a 。（跟删除表格行同步）
fileCount--; //总数 -1
}
//http://blog.csdn.net/zhongbx/archive/2007/04/06/1553919.aspx
</script>
</head>
<body>
<form id="kkk" action="/KmZszbfj.do" enctype="multipart/form-data" method="POST">
<table width="900" height="10" border="0" align="center"
cellpadding="0" cellspacing="0" id='tableA'>
<tr>
<td height="27" align="center" bgcolor="#E2F0FE" class="time"><P id="MyFile">
<a href=#? class="addfile" id="a0">
<input type="file" class="addfile" onchange="addFile()" size="1" name="uploadFile[0].file" value=""/>
</a>
</P></td>
<td height="79" align="center" colSpan="3" bgcolor="#E2F0FE" class="time">
<div align="left">
<table width="100%" height="100%" border="0">
<tr><td width="40%" align="left"></td><td width="60%"></td></tr>
<tr>
<td colspan="2">
<table width="100%" border="0" id="fileTable" align="left"></table>
</td>
</table>
</div>
</td>
</tr>
</table>
<P id="btnFile">
<input type="button" name="btnAddFile" value="text html" onclick="javascript:alert(MyFile.innerHTML);"/>
</P>
</body></html>
jonyxx 2007-06-13
- 打赏
- 举报
楼上BearRui的代码也不好用，并非那种效果！但仍然感谢。。。
效果为：
点击“添加附加”后弹出选择文件框（调用file表单域的click事件），页面上只显示已添加的文件名，没有必要像以前那样显示file文件框，这样做的好处有两个：
1、减少用户的点击次数；2、界面美观
希望大家多加支持！
效果为：
点击“添加附加”后弹出选择文件框（调用file表单域的click事件），页面上只显示已添加的文件名，没有必要像以前那样显示file文件框，这样做的好处有两个：
1、减少用户的点击次数；2、界面美观
希望大家多加支持！
lovingkiss 2007-06-13
- 打赏
- 举报
不好意思，没看题目，只看内容了。抱歉。~~
不过你的代码也不好用罢了。
不过你的代码也不好用罢了。
BearRui 2007-06-13
- 打赏
- 举报
应该 ——> 因为
BearRui 2007-06-13
- 打赏
- 举报
我给楼主的代码能实现那样的效果，应该我们系统中一直都是这样用的。
jonyxx 2007-06-13
- 打赏
- 举报
---但我认为并不是这样，否则网易（126）邮箱是怎么做到的？
这跟一般的附件上传没有什么多大的区别，只是打开浏览文件的方式不同，触发的事件不同而已。。。
在研发的过程中，我发现了一个问题：
不同于普通的附件上传之处为file中的name属性没了，上面我设置了outerHTML无效；但当我用oFileInput.setAttribute("name",_name)来设置name属性时也无法保存（这样必须点击“附件数”+1次保存），我觉得在这个过程中存在一个矛盾？？？
很苦恼！！！
这跟一般的附件上传没有什么多大的区别，只是打开浏览文件的方式不同，触发的事件不同而已。。。
在研发的过程中，我发现了一个问题：
不同于普通的附件上传之处为file中的name属性没了，上面我设置了outerHTML无效；但当我用oFileInput.setAttribute("name",_name)来设置name属性时也无法保存（这样必须点击“附件数”+1次保存），我觉得在这个过程中存在一个矛盾？？？
很苦恼！！！
BearRui 2007-06-13
- 打赏
- 举报
楼上就知道瞎朗朗，楼主的问题你看懂了没？别没事有事就乱吼。
人家说的126的效果，不能实现，126怎么实现的？？？
人家说的126的效果，不能实现，126怎么实现的？？？
加载更多回复（10）
