Post
Ask Question
Senorita

Senorita

  • 1.5k
  • 123
  • 8.2k

File Upload Through JQuery AJAX In ASP.NET

Apr 7 2020 7:53 AM
hi
i am creating a html form in web application(not in MVC) in this form i have html file upload cotrol  want to upload excel file data in data b
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head runat="server">  
  4.     <title></title>  
  5.     <script src="DataTables/jQuery-1.12.4/jquery-1.12.4.js"></script>  
  6.     <script src="DataTables/jQuery-1.12.4/jquery-1.12.4.min.js"></script>  
  7.     <link href="DataTables/Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />  
  8.     <script type="text/javascript" src="DataTables/Bootstrap-3.3.7/js/bootstrap.js"></script>  
  9.     <script type="text/javascript" src="DataTables/Bootstrap-3.3.7/js/bootstrap.min.js"></script>  
  10.   
  11.     <script src="DataTables/DataTables-1.10.20/js/jquery.dataTables.js"></script>  
  12.     <link href="DataTables/DataTables-1.10.20/css/jquery.dataTables.css" rel="stylesheet" />  
  13.     <link href="DataTables/Bootstrap-3.3.6/css/bootstrap.css" rel="stylesheet" />  
  14.     <style type="text/css">  
  15.         body {  
  16.             font-family: Arial;  
  17.             font-size: 10pt;  
  18.         }  
  19.   
  20.         .modalBackground {  
  21.             background-color: Black;  
  22.             filter: alpha(opacity=60);  
  23.             opacity: 0.6;  
  24.         }  
  25.   
  26.         .modalPopup {  
  27.             background-color: #FFFFFF;  
  28.             width: 450px;  
  29.             border: 3px solid #0DA9D0;  
  30.             padding: 0;  
  31.         }  
  32.   
  33.             .modalPopup .header {  
  34.                 background-color: #821a1a;  
  35.                 height: 15px;  
  36.                 color: White;  
  37.                 line-height: 15px;  
  38.                 text-align: center;  
  39.                 font-weight: bold;  
  40.             }  
  41.   
  42.             .modalPopup .body {  
  43.                 min-height: 50px;  
  44.                 line-height: 20px;  
  45.                 text-align: start;  
  46.                 font-weight: normal;  
  47.             }  
  48.   
  49.         body {  
  50.             font-family: Arial;  
  51.             font-size: 10pt;  
  52.         }  
  53.   
  54.         .modalBackground {  
  55.             background-color: Black;  
  56.             filter: alpha(opacity=60);  
  57.             opacity: 0.6;  
  58.         }  
  59.   
  60.         .modalPopup {  
  61.             background-color: #FFFFFF;  
  62.             width: 450px;  
  63.             border: 3px solid #0DA9D0;  
  64.             padding: 0;  
  65.         }  
  66.   
  67.             .modalPopup .header {  
  68.                 background-color: #0D337F;  
  69.                 height: 30px;  
  70.                 color: White;  
  71.                 line-height: 30px;  
  72.                 text-align: center;  
  73.                 font-weight: bold;  
  74.             }  
  75.   
  76.             .modalPopup .body {  
  77.                 min-height: 50px;  
  78.                 line-height: 20px;  
  79.                 text-align: start;  
  80.                 font-weight: normal;  
  81.             }  
  82.   
  83.         .modal {  
  84.             position: fixed;  
  85.             top: 0;  
  86.             left: 0;  
  87.             background-color: black;  
  88.             z-index: 99;  
  89.             opacity: 0.8;  
  90.             filter: alpha(opacity=80);  
  91.             -moz-opacity: 0.8;  
  92.             min-height: 100%;  
  93.             width: 100%;  
  94.         }  
  95.   
  96.         .loading {  
  97.             font-family: Arial;  
  98.             font-size: 10pt;  
  99.             border: 5px solid #67CFF5;  
  100.             width: 200px;  
  101.             height: 100px;  
  102.             display: none;  
  103.             position: fixed;  
  104.             background-color: White;  
  105.             z-index: 999;  
  106.         }  
  107.   
  108.         .auto-style1 {  
  109.             PADDING-LEFT: 2px;  
  110.             FONT-SIZE: 7pt;  
  111.             BORDER-LEFT: #cccccc 1px solid;  
  112.             BORDER-BOTTOM: #dddddd 1px solid;  
  113.             FONT-FAMILY: Verdana;  
  114.             height: 39px;  
  115.             border-right-style: none;  
  116.             border-right-color: inherit;  
  117.             border-right-width: 0px;  
  118.             border-top-style: none;  
  119.             border-top-color: inherit;  
  120.             border-top-width: 0px;  
  121.         }  
  122.     </style>  
  123.     <script type="text/javascript">  
  124.         function ShowProgress() {  
  125.             setTimeout(function () {  
  126.                 var modal = $('<div />');  
  127.                 modal.addClass("modal");  
  128.                 $('body').append(modal);  
  129.                 var loading = $(".loading");  
  130.                 loading.show();  
  131.                 var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);  
  132.                 var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);  
  133.                 loading.css({ top: top, left: left });  
  134.             }, 200);  
  135.         }  
  136.   
  137.   
  138.         $('form').live("submit", function () {  
  139.             ShowProgress();  
  140.         });  
  141.                
  142.     </script>  
  143.   
  144.   
  145.   
  146.     <style>  
  147.         .showHide {  
  148.             cursor: pointer;  
  149.         }  
  150.     </style>  
  151. </head>  
  152. <body style="font-family: Arial; font-size: 10pt">  
  153.     <form id="form1" runat="server">  
  154.   
  155.         <div style="padding: 5px; border: 1px solid black; margin-top: 0px" class="container-fluid">  
  156.   
  157.             <div>  
  158.                 <div style="background-color: #821a1a; font-family: Arial Black; color: white" align="center">  
  159.                     <font face="Arial Black" size="3" color="white"><b>Upload TDS  and GST  Memorandum Upload </b></font>  
  160.                 </div>  
  161.             </div>  
  162.   
  163.             <table id="tblForm" cellspacing="0" cellpadding="0" width="100%">  
  164.                 <tr style="background-color:#FFFFCC;">  
  165.                     <td class="thinTableLeft" align="left" height="12">  
  166.                         <font size="2">Download Sample Format File TDS</font>  
  167.                     </td>  
  168.                     <td class="thinTableLeft" align="left" colspan="3" height="12">  
  169.                         <font style="font-size: 8pt" face="Verdana"><a href="DownloadFile/SampleForm26.xlsx">Download Sample Format</a> </font>  
  170.                     </td>  
  171.                 </tr>  
  172.                 <tr style="background-color:#FFFFCC;">  
  173.                     <td class="thinTableLeft" width="25%"><font face="Verdana" size="2" color="black"> Form 26</font></td>  
  174.                     <td class="thinTableLeft" width="25%">  
  175.                         <input type="file"  
  176.                                id="TDS" name="TDS"  
  177.                                accept=".xls,.xlsx">  
  178.                     </td>  
  179.                     <td class="thinTableLeft" width="25%"><button type="button" id="TDSUPLOAD" onclick="saveData(this)">TDS Upload</button></td>  
  180.                     <td class="thinTableLeft" width="25%"></td>  
  181.                 </tr>  
  182.                 <tr style="background-color:#FFFFCC;"><td colspan="4" width="25%"> <br /></td></tr>  
  183.                 <tr style="background-color:#FFFFCC;">  
  184.                     <td class="thinTableLeft" align="left" height="12">  
  185.                         <font size="2">Download Sample Format File for GST</font>  
  186.                     </td>  
  187.                     <td class="thinTableLeft" align="left" colspan="3" height="12">  
  188.                         <font style="font-size: 8pt" face="Verdana"><a href="DownloadFile/SampleGST.xlsx">Download Sample Format</a> </font>  
  189.                     </td>  
  190.                 </tr>  
  191.                 <tr style="background-color:#FFFFCC; ">  
  192.                     <td class="thinTableLeft" width="25%"><font face="Verdana" size="2" color="black"> GST</font></td>  
  193.                     <td class="thinTableLeft" width="25%">  
  194.                         <input type="file"  
  195.                                id="GST" name="GST"  
  196.                                accept=".xls,.xlsx">  
  197.                     </td>  
  198.                     <td class="thinTableLeft" width="25%"><button type="button" id="GSTUPLOAD">GST Upload</button></td>  
  199.                     <td class="thinTableLeft" width="25%"></td>  
  200.                 </tr>  
  201.   
  202.             </table>  
  203.   
  204.         </div>  
  205.         <div class="loading" align="center">  
  206.             Loading. Please wait.<br />  
  207.             <br />  
  208.             <img src="images/loader.gif" alt="" />  
  209.         </div>  
  210.     </form>  
  211.     <script type="text/javascript">  
  212.         //$(document).ready(function () {  
  213.   
  214.         //    ///////////////////////////////////////////////  
  215.         //    $('#TDSUPLOAD').click(function () {  
  216.         //        if (document.getElementById('TDS').value == "") {  
  217.   
  218.         //            alert("Alert - Please Attached Form 26 AS");  
  219.         //            return false;  
  220.         //        }  
  221.         //        ShowProgress();  
  222.         //    });  
  223.         //    $('#GSTUPLOAD').click(function () {  
  224.         //        if (document.getElementById('GST').value == "") {  
  225.   
  226.         //            alert("Alert - Please Attached GST Form");  
  227.         //            return false;  
  228.   
  229.         //        }  
  230.         //        ShowProgress();  
  231.         //    });  
  232.   
  233.   
  234.         //})  
  235.         function saveData(obj) {  
  236.             if (document.getElementById('TDS').value == "") {  
  237.   
  238.                 alert("Alert - Please Attached Form 26 AS");  
  239.                 return false;  
  240.             }  
  241.             ShowProgress();  
  242.             debugger;  
  243.             try {  
  244.                 if (window.FormData !== undefined) {  
  245.   
  246.                     var fileUpload = $("#TDS").get(0);  
  247.                     var files = fileUpload.files;  
  248.   
  249.                     // Create FormData object    
  250.                     var fileData = new FormData();  
  251.   
  252.                     // Looping over all files and add it to FormData object    
  253.                     for (var i = 0; i < files.length; i++) {  
  254.                         fileData.append(files[i].name, files[i]);  
  255.                     }  
  256.   
  257.                     // Adding one more key to FormData object    
  258.                       
  259.   
  260.                     $.ajax({  
  261.                         url: 'TDS_Memorandum.asmx/SaveTDSData',  
  262.                         type: "POST",  
  263.                         contentType: false, // Not to set any content header    
  264.                         processData: false, // Not to process data    
  265.                         data: fileData,  
  266.                         success: function (result) {  
  267.                             alert(result);  
  268.                         },  
  269.                         error: function (err) {  
  270.                             alert(err.statusText);  
  271.                         }  
  272.                     });  
  273.                 } else {  
  274.                     alert("FormData is not supported.");  
  275.                 }    
  276.   
  277.             }  
  278.             catch (err) {  
  279.                 alert(err.message);  
  280.             }  
  281.         }  
  282.     </script>  
  283.   
  284.   
  285.       
  286.   
  287. </body >  
  288. </html >  
ase using jquery. but dont know how to do.  

Answers (2)