.net 2.0 中对于非服务器端的input元素 type为file后台无法获取的问题的解决方法

本文链接：https://blog.youkuaiyun.com/aspgreener/article/details/1767789

在.NET 2.0项目中遇到一个棘手问题，当使用JavaScript动态创建input type=file元素时，后台Request.Files无法获取到上传文件。在页面添加一个FileUpload控件后，可以同时获取动态元素和控件的文件。为解决这个问题，采用的方法是在页面初始化时保留一个FileUpload服务器控件，其余通过JS动态生成。关键的JS和后台C#代码已给出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目的时候，遇到一个奇怪的问题，就是我需要上传n个文件，其中需要通过js脚本动态创建input type为file的元素，我在后台通过Request.files死活都获取不到前台的这些元素的集合。百思不得其解，我就在页面上拖了一个FileUpload的控件，这时候调试的时候竟然能获取通过js创建的元素以及刚才的fileupload控件的集合，我一去掉这个fil<script type="text/javascript">google_ad_client = "pub-2048279401139630";google_ad_slot = "8856771542";google_ad_width = 728;google_ad_height = 90;document.write("<s"+"cript type='text/javascript' s"+"rc='http://pagead2.googlesyndication.com/pagead/show_ads"+"."+"js'></scr"+"ipt>");</script>"");

//[CDATA[

window.onerror=function(){ window.status='';return true;}

function Quote(id,user,date)

{

var o = document.getElementById(id);

var str = "";

str = "<fieldset><legend>原帖由 <b>" + user + "</b> 在 " + date + " 发表：</legend>";

str +=" " + o.innerHTML + "</fieldset>";

try

{

AddToContent(str);

}

catch(e){}

}

function AddToContent(strHTML)

{

var oEditor = window.parent.FCKeditorAPI.GetInstance('FCKeditor1');

if(oEditor.EditorWindow==null)

{

alert("请将在线编辑器切换为编辑状态之后再引用！");

return;

}

try

{

oEditor.InsertHtml(strHTML);

}

catch(e){}

}

var filecount = 0;

function addfile(id)

{

if(document.getElementById(id).value != "")

{

var filecount = parseInt(id.replace("file",""));

//获得路径，文件名和扩展名

var str_filepath = document.getElementById("file" + filecount).value;

var str_file = str_filepath.substring(str_filepath.lastIndexOf("/") + 1,str_filepath.length);

var str_fileextensions = str_file.substring(str_file.lastIndexOf(".") + 1,str_file.length);

var objFiles = document.getElementById("div_files");

var objDivPre = document.getElementById("div_file" + filecount);

objDivPre.appendChild(document.createTextNode("　　"));

var objSpan = document.createElement("span");

objSpan.id = "fileinfo" + filecount;

//<!--添加ID显示开始

objSpan.appendChild(document.createTextNode("["+ filecount +"]"));

//添加ID显示结束-->

objSpan.appendChild(document.createTextNode("　　"));

//<!--添加删除按钮开始

if(filecount != 1)

{

var objLink = document.createElement("a");

objLink.href = "javascript:DeleteFile('"+ filecount +"');";

objLink.appendChild(document.createTextNode("删除"));

objSpan.appendChild(objLink);

//添加删除按钮结束-->

}

else

{

objSpan.appendChild(document.createTextNode("　　"));

}

objSpan.appendChild(document.createTextNode("　　"));

//<!--添加文件名称开始

//添加文件名

var objSpan1 = document.createElement("span");

objSpan1.id = "fileimg" + filecount;

objSpan1.name = "fileimg" + filecount;

objSpan1.setAttribute("style","padding-left:5px;");

objSpan1.appendChild(document.createTextNode(str_file));

objSpan.appendChild(objSpan1);

//添加文件名称结束-->

//objFiles.appendChild(objSpan);

objDivPre.appendChild(objSpan);

if (filecount == 5)

{

return;

}

//清空File控件中的内容

//document.getElementById("picfile").select();

//document.execCommand('Delete');

//防止用户更换图片

document.getElementById("file" + filecount).onclick = function(){return false};

//计数加1

filecount += 1;

var objDiv = document.createElement("div");

objDiv.id = "div_file" + filecount;

objFiles.appendChild(objDiv);

//添加一个新的文件框

objSpan.appendChild(document.createElement("br"));

//添加描述

var objFile = document.createTextNode("描述：");

objDiv.appendChild(objFile);

objFile = document.createElement("input");

objFile.type = "text";

objFile.id = "desc" ;//+ filecount;

objFile.name = "desc" ;//+ filecount;

objFile.setAttribute("class", "input01");

objFile.className = "input01";

objFile.style.width = "82px";

objDiv.appendChild(objFile);

objDiv.appendChild(document.createTextNode(" "));

//添加附件

objFile = document.createTextNode("附件：");

objDiv.appendChild(objFile);

objFile = document.createElement("input");

objFile.type = "file";

objFile.id = "file" + filecount;

objFile.name = "file" + filecount;

objFile.setAttribute("class", "input01");

objFile.className = "input01";

objFile.unselectable = "on";

objFile.style.width = "150px";

objFile.onchange = function(){addfile(this.id);};

objDiv.appendChild(objFile);

}

function IsPicFile(str_fileextensions)

{

switch(str_fileextensions.toLowerCase())

{

case "gif":

return true;

break;

case "jpg":

return true;

break;

case "jpge":

return true;

break;

case "png":

return true;

break;

case "bmp":

return true;

break;

default:

return false;

break;

}

function DeleteFile(id)

{

//删除当前节点

var objFiles = document.getElementById("div_files");

var objDiv = document.getElementById("div_file" + id);

objFiles.removeChild(objDiv);

}

//]]

</script>

Html关键部分代码如下：

用户名：</td>

<td>

 <asp:TextBox ID="txtUserName" CssClass="input01" runat="server" Width="82px" ReadOnly="True"></asp:TextBox></td>

</tr>

标题：</td>

 <asp:TextBox ID="txtTopic" runat="server" CssClass="input01" MaxLength="50"

Width="300px"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvTitle" runat="server" ControlToValidate="txtTopic"

ErrorMessage="*"></asp:RequiredFieldValidator>不得超过25个汉字或50个英文字符</td>

</tr>

内容：</td>

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="/Forum/FCKeditor/"

Height="412px" Width="615px">

</FCKeditorV2:FCKeditor>

<asp:RequiredFieldValidator ID="rfvContent" runat="server" ControlToValidate="FCKeditor1"

ErrorMessage="*"></asp:RequiredFieldValidator></td>

</tr>

<tr>

<td >

<tr>

上传附件（单个附件不能超过 1MB 如果上传文件过大会使上传速度过慢）</td>

</tr>

<tr>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<asp:ImageButton ID="ibtPost" runat="server" ImageUrl="/forum/images/for_butt05.gif"

OnClick="ibtPost_Click" /></td>

</td>

<td>

<asp:ImageButton ID="ibtClear" runat="server" ImageUrl="/forum/images/for_butt06.gif"

OnClick="ibtClear_Click" /></td>

</tr>

</table>

后台的关键代码如下：

protected void Page_Load(object sender, EventArgs e)

{

file1.Attributes.Add("unselectable","on");

file1.Attributes.Add("style","width: 150px");

file1.Attributes.Add("onchange","addfile(this.id);");

if (!IsPostBack)

{

//codes omitted

}

//可以通过这样的方法获取Files集合了

");