File Upload Through JQuery AJAX In ASP.NET

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

>
<html>
<head runat="server">
<title>title>
<script src="DataTables/jQuery-1.12.4/jquery-1.12.4.js">script>
<script src="DataTables/jQuery-1.12.4/jquery-1.12.4.min.js">script>
<link href="DataTables/Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="DataTables/Bootstrap-3.3.7/js/bootstrap.js">script>
<script type="text/javascript" src="DataTables/Bootstrap-3.3.7/js/bootstrap.min.js">script>
<script src="DataTables/DataTables-1.10.20/js/jquery.dataTables.js">script>
<link href="DataTables/DataTables-1.10.20/css/jquery.dataTables.css" rel="stylesheet" />
<link href="DataTables/Bootstrap-3.3.6/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
.modalBackground {
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup {
background-color: #FFFFFF;
width: 450px;
border: 3px solid #0DA9D0;
padding: 0;
}
.modalPopup .header {
background-color: #821a1a;
height: 15px;
color: White;
line-height: 15px;
text-align: center;
font-weight: bold;
}
.modalPopup .body {
min-height: 50px;
line-height: 20px;
text-align: start;
font-weight: normal;
}
body {
font-family: Arial;
font-size: 10pt;
}
.modalBackground {
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup {
background-color: #FFFFFF;
width: 450px;
border: 3px solid #0DA9D0;
padding: 0;
}
.modalPopup .header {
background-color: #0D337F;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body {
min-height: 50px;
line-height: 20px;
text-align: start;
font-weight: normal;
}
.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
.auto-style1 {
PADDING-LEFT: 2px;
FONT-SIZE: 7pt;
BORDER-LEFT: #cccccc 1px solid;
BORDER-BOTTOM: #dddddd 1px solid;
FONT-FAMILY: Verdana;
height: 39px;
border-right-style: none;
border-right-color: inherit;
border-right-width: 0px;
border-top-style: none;
border-top-color: inherit;
border-top-width: 0px;
}
style>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
script>
<style>
.showHide {
cursor: pointer;
}
style>
head>
<body style="font-family: Arial; font-size: 10pt">
<form id="form1" runat="server">
<div style="padding: 5px; border: 1px solid black; margin-top: 0px" class="container-fluid">
<div>
<div style="background-color: #821a1a; font-family: Arial Black; color: white" align="center">
<font face="Arial Black" size="3" color="white"><b>Upload TDS and GST Memorandum Upload b>font>
div>
div>
<table id="tblForm" cellspacing="0" cellpadding="0" width="100%">
<tr style="background-color:#FFFFCC;">
<td class="thinTableLeft" align="left" height="12">
<font size="2">Download Sample Format File TDSfont>
td>
<td class="thinTableLeft" align="left" colspan="3" height="12">
<font style="font-size: 8pt" face="Verdana"><a href="DownloadFile/SampleForm26.xlsx">Download Sample Formata> font>
td>
tr>
<tr style="background-color:#FFFFCC;">
<td class="thinTableLeft" width="25%"><font face="Verdana" size="2" color="black"> Form 26font>td>
<td class="thinTableLeft" width="25%">
<input type="file"
id="TDS" name="TDS"
accept=".xls,.xlsx">
td>
<td class="thinTableLeft" width="25%"><button type="button" id="TDSUPLOAD" onclick="saveData(this)">TDS Uploadbutton>td>
<td class="thinTableLeft" width="25%">td>
tr>
<tr style="background-color:#FFFFCC;"><td colspan="4" width="25%"> <br />td>tr>
<tr style="background-color:#FFFFCC;">
<td class="thinTableLeft" align="left" height="12">
<font size="2">Download Sample Format File for GSTfont>
td>
<td class="thinTableLeft" align="left" colspan="3" height="12">
<font style="font-size: 8pt" face="Verdana"><a href="DownloadFile/SampleGST.xlsx">Download Sample Formata> font>
td>
tr>
<tr style="background-color:#FFFFCC; ">
<td class="thinTableLeft" width="25%"><font face="Verdana" size="2" color="black"> GSTfont>td>
<td class="thinTableLeft" width="25%">
<input type="file"
id="GST" name="GST"
accept=".xls,.xlsx">
td>
<td class="thinTableLeft" width="25%"><button type="button" id="GSTUPLOAD">GST Uploadbutton>td>
<td class="thinTableLeft" width="25%">td>
tr>
table>
div>
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="images/loader.gif" alt="" />
div>
form>
<script type="text/javascript">
//$(document).ready(function () {
// ///////////////////////////////////////////////
// $('#TDSUPLOAD').click(function () {
// if (document.getElementById('TDS').value == "") {
// alert("Alert - Please Attached Form 26 AS");
// return false;
// }
// ShowProgress();
// });
// $('#GSTUPLOAD').click(function () {
// if (document.getElementById('GST').value == "") {
// alert("Alert - Please Attached GST Form");
// return false;
// }
// ShowProgress();
// });
//})
function saveData(obj) {
if (document.getElementById('TDS').value == "") {
alert("Alert - Please Attached Form 26 AS");
return false;
}
ShowProgress();
debugger;
try {
if (window.FormData !== undefined) {
var fileUpload = $("#TDS").get(0);
var files = fileUpload.files;
// Create FormData object
var fileData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
// Adding one more key to FormData object
$.ajax({
url: 'TDS_Memorandum.asmx/SaveTDSData',
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: fileData,
success: function (result) {
alert(result);
},
error: function (err) {
alert(err.statusText);
}
});
} else {
alert("FormData is not supported.");
}
}
catch (err) {
alert(err.message);
}
}
script>
body >
html >

ase using jquery. but dont know how to do.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Senorita6y ago
i checked all this solution you sugessted. actual i have created simple asp.net web application in my application there is no web page i am working html page and i dont know how to upload file in using jquery in database
0
Rajanikant Hawaldar6y ago
Hello friend go through this article https://www.c-sharpcorner.com/blogs/uploading-files-using-jquery-ajax-in-asp-net1 https://www.codeproject.com/Articles/806075/File-Upload-using-jQuery-AJAX-in-ASP-NET-Web-API https://www.yogihosting.com/jquery-file-upload/ https://forums.asp.net/t/1949544.aspx?How+to+Upload+File+in+asp+net+using+Ajax+Jquery
0