ASP.NET 前端 JS 动态构建 Form 实现文件上传

作者:代码拾荒时间:2026-10-22 20:37:50浏览:603

本文介绍在 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(".")));
          }
        }
      }
      //
      //......其他代码
      //
    }

总结

以上内容为本文的全部介绍,希望能为读者在学习或工作中提供一定的参考价值,感谢支持。如需了解更多相关技术细节,请参阅其他相关链接。

作者最新文章