ASP.NET 前端 JS 动态构建 Form 实现文件上传
本文介绍在 ASP.NET 环境中,如何通过前端 JavaScript 动态创建 HTML Form 元素,以 Post 方式提交文件至服务器。文章详细解析了前台页面结构、JS 核心逻辑以及后端 C# 代码处理流程,重点讲解了如何利用 Request.Files 获取上传文件及参数传递机制。
ASP.NET 前端 JS 动态构建 Form 实现文件上传
近期开发中涉及一种基于 JavaScript 配合 HTML Form 表单进行文件 Post 上传的方案。前端采用原生 HTML Input 元素,并通过 JS 脚本将文件发送至服务器,具体实现逻辑参考后续代码。
前端页面结构与触发机制
前端页面基于 ASPX 构建,使用 input 标签并指定 type 为 file。该标签不设置 runat="server" 属性,即不使用服务器端控件。此外,页面需包含一个隐藏的 iframe 标签,并配置一个 a 标签作为触发按钮,用于调用 JS 函数:Uploadfun();。
<div>
<input type="file" id="FileUpLoad" name="FileUpLoad" style="width:140px;" />
<a href="javascript:void(0);" rel="external nofollow" onclick="Uploadfun()">上传</a>
<iframe name="hidden_frame" id="hidden_frame" style="width:10%;display:none;"></iframe>
</div>
JavaScript 核心实现逻辑
具体的 JavaScript 实现代码如下:
function Uploadfun(){
var _file = document.getElementById("FileUpLoad"); //此处是前台页面的 input 标签的ID
var _form = document.createElenent("form"); //创建一个form
document.body.appendChild(_form);//添加一个form
_form.encoding = "multipart/form-data"; //使用该编码规程可以不限制 post表单2M大小的限制
_form.method="post";//使用POST方式
_form.action="../Service/FileSrv.aspx?Type=Client&CallFun=UploadFile"; //此处使用Get方式,传到前台页面的后台Server代码层;
// 这个是本人工作中的项目位置
_form.target = "hidden_frame";
var pos = _file.nextSibling;
_form.appendChild(_file);
_form.submit();
pos.parentNode.insertBefore(_file,pos);
document.body.renoveChild(_form);
}
后端 C# 代码处理与参数获取
C# 后端代码对应 JS 中 Form 的 action 属性指向的地址。在 FileSrv.aspx 的后置代码中,可通过调用 getquery 方法获取通过 Get 方式传递的参数。
本示例中,参数 Type=Client 用于标识模块,CallFun 则指定后端 C# 代码中需要调用的响应函数;UploadFile();。
相关后端处理代码如下:
private void UploadFile()
{
//
//......其他代码
//
HttpFileCollection files = HttpContext.Current.Request.Files;
if(files.Count>0)
{
int lintTemp = files[0].FileName.LastIndexOf(".");//得到input标签中的file文件路径;
string lstrFileType = string.Empty;
string lstrContentType = string.Empty;
if(lintTemp!=-1 &&files[0].FileName.Length>lintTemp+1)
{
lstrFileType = files[0].FileName.Substring(lintTemp+1).ToUpper();
}
if(lstrFileType.ToUpper()=="JPG")
{
if(files[0].ContentLength<10485760)
{
//记得要先保存到应用程序发布所在的服务器上!
files[0].SaveAs(Server.MapPath("~/Files/")+"JPG1."+files[0].FileName.Substring(files[0].FileName.LastIndexOf(".")));
}
}
}
//
//......其他代码
//
}
总结
以上内容为本文的全部介绍,希望能为读者在学习或工作中提供一定的参考价值,感谢支持。如需了解更多相关技术细节,请参阅其他相关链接。
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
