TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Senorita
NA
123
8.8k
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
<!DOCTYPE html
>
<
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 TDS
</
font
>
</
td
>
<
td
class
=
"thinTableLeft"
align
=
"left"
colspan
=
"3"
height
=
"12"
>
<
font
style
=
"font-size: 8pt"
face
=
"Verdana"
>
<
a
href
=
"DownloadFile/SampleForm26.xlsx"
>
Download Sample Format
</
a
>
</
font
>
</
td
>
</
tr
>
<
tr
style
=
"background-color:#FFFFCC;"
>
<
td
class
=
"thinTableLeft"
width
=
"25%"
>
<
font
face
=
"Verdana"
size
=
"2"
color
=
"black"
>
Form 26
</
font
>
</
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 Upload
</
button
>
</
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 GST
</
font
>
</
td
>
<
td
class
=
"thinTableLeft"
align
=
"left"
colspan
=
"3"
height
=
"12"
>
<
font
style
=
"font-size: 8pt"
face
=
"Verdana"
>
<
a
href
=
"DownloadFile/SampleGST.xlsx"
>
Download Sample Format
</
a
>
</
font
>
</
td
>
</
tr
>
<
tr
style
=
"background-color:#FFFFCC; "
>
<
td
class
=
"thinTableLeft"
width
=
"25%"
>
<
font
face
=
"Verdana"
size
=
"2"
color
=
"black"
>
GST
</
font
>
</
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 Upload
</
button
>
</
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.
Reply
Answers (
2
)
MVC - Send Info From Modal Popup to Controller
Designing of below on client side