asp. net Submit data using JS+form form Post and Get

  • 2021-11-01 03:02:42
  • OfStack

Recently, I used one way to upload files by JS + form and post. Foreground with Html input, the use of JS to upload files to the server, the specific implementation of the code:

The foreground page uses aspx web page, uses input tag, and uses its file type; This label does not use runat= "server". Server controls are not used; You need to add an iframe tag here. And hide; Set the 1a label. Used as a button for users to click; Call the JS function: Uploadfun();


 <div>
  <input type="file" id="FileUpLoad" name="FileUpLoad" style="width:140px;" />
  <a href="javascript:void(0);" rel="external nofollow" onclick="Uploadfun()"> Upload </a>
 <iframe name="hidden_frame" id="hidden_frame" style="width:10%;display:none;"></iframe>
 </div>

The JS code is as follows:


function Uploadfun(){
      var _file = document.getElementById("FileUpLoad"); // Here is the  input  Labeled ID
      var _form = document.createElenent("form"); // Create 1 A form
      document.body.appendChild(_form);// Add 1 A form
      _form.encoding = "multipart/form-data"; // The coding procedure can be used without restriction  post Form 2M Size limit 
      _form.method="post";// Use POST Mode 
      _form.action="../Service/FileSrv.aspx?Type=Client&CallFun=UploadFile"; // Use here Get Mode, pass to the background of the foreground page Server Code layer; 
      //  This is the project position in my work 
      _form.target = "hidden_frame";
      var pos = _file.nextSibling;
      _form.appendChild(_file);
      _form.submit();
      pos.parentNode.insertBefore(_file,pos);
      document.body.renoveChild(_form);
    }

C # Layer code: It is identified by action of form in JS code. In the background cs code of FileSrv. aspx, we can use the getquery Method to obtain the parameters transmitted by Get;

In this example, the parameter Type=Client is a module identification, and CallFun indicates the response function to be called by cs code layer. UploadFile();

The code is as follows:


private void UploadFile()
    {
      //
      //...... Other codes 
      //
      HttpFileCollection files = HttpContext.Current.Request.Files;
      if(files.Count>0)
      {
        int lintTemp = files[0].FileName.LastIndexOf(".");// Get input In the tag file File path; 
        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)
          {
           // Remember to save it to the server where the application is published first! 
            files[0].SaveAs(Server.MapPath("~/Files/")+"JPG1."+files[0].FileName.Substring(files[0].FileName.LastIndexOf(".")));
          }
        }
      }
      //
      //...... Other codes 
      //
    }

Summarize


Related articles: