File ->New->WebSite
Add->Add New Item
And Click on Add Button
Now, we need to Add JQuery Files
Now, we Need to Add Jquery Ajax File as shown below.
We can download the Jquery Files From the below link.
http://jqueryui.com/download/all/
Select Add-> Add New Item
And Click on Add Button., write the following javascript code as shown below.
Javascript1.js Code
$(document).ready(function () {
FileUpload();
});
function FileUpload() {
var extension = '';
var button = $('#browsefilebtn'), interval;
$.ajax_upload(button, {
action: 'Handler.ashx',
name: 'myfile',
type: 'GET',
onSubmit: function (file, ext) {
extension = ext;
interval = window.setInterval(function () {
}, 200);
},
onComplete: function (file, response) {
response = response.replace(/"/gi, "");
var zip = 'responseText';
var src = response.substring(0, response.lastIndexOf("."));
if (file != "Invalid" || file != "Loading Error") {
$('#divItemfiles').append('<div> <a class="files" target="_blank" href="Files/UploadFiles/' + response + '") >' + response + '</a> <a href="javascript:" onclick="DeleteFile(this)"></a></div>');
window.clearInterval(interval);
}
else {
alert("Error Message");
}
}
});
}
screen shot of javascript1.js File
Now, we need to Add Handler.
Add->New Item
Now, Create the Folder Structure in the Application as shown below(i.e Add two Folders)
Now, write the following code in Handler as shown Below.
Handler Code
public class Handler : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string strResponse = "error";
try
{
string strFileName = System.IO.Path.GetFileName(context.Request.Files[0].FileName);
string strExtension = System.IO.Path.GetExtension(context.Request.Files[0].FileName).ToLower();
string strSaveLocation = context.Server.MapPath("~/Files/UploadFiles");
string filename = System.IO.Path.Combine(strSaveLocation, strFileName);
HttpPostedFile oFile = context.Request.Files[0];
oFile.SaveAs(filename);
System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
strResponse = javaScriptSerializer.Serialize(strFileName);
}
catch (Exception Ex)
{
strResponse = Ex.Message;
}
context.Response.Write(strResponse);
}
public bool IsReusable {
get {
return false;
}
}
ScreenShot of Handler Code
Write the Following Code in Default page as shown Below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.ajax_upload.0.6.min.js"></script>
<script src="JavaScript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="Button" runat="server" value="Browse" id="browsefilebtn" />
</div>
<div id="divItemfiles" runat="server">
</div>
</form>
</body>
</html>
Note: We need not write any Code in .cs Page.
Output:
Click on Browse Button and Now, u can upload Files as shown Below.
Add->Add New Item
Add New WebForm
And Click on Add Button
Now, we need to Add JQuery Files
Now, we Need to Add Jquery Ajax File as shown below.
We can download the Jquery Files From the below link.
http://jqueryui.com/download/all/
Select Add-> Add New Item
And Click on Add Button., write the following javascript code as shown below.
Javascript1.js Code
$(document).ready(function () {
FileUpload();
});
function FileUpload() {
var extension = '';
var button = $('#browsefilebtn'), interval;
$.ajax_upload(button, {
action: 'Handler.ashx',
name: 'myfile',
type: 'GET',
onSubmit: function (file, ext) {
extension = ext;
interval = window.setInterval(function () {
}, 200);
},
onComplete: function (file, response) {
response = response.replace(/"/gi, "");
var zip = 'responseText';
var src = response.substring(0, response.lastIndexOf("."));
if (file != "Invalid" || file != "Loading Error") {
$('#divItemfiles').append('<div> <a class="files" target="_blank" href="Files/UploadFiles/' + response + '") >' + response + '</a> <a href="javascript:" onclick="DeleteFile(this)"></a></div>');
window.clearInterval(interval);
}
else {
alert("Error Message");
}
}
});
}
screen shot of javascript1.js File
Now, we need to Add Handler.
Add->New Item
Now, Create the Folder Structure in the Application as shown below(i.e Add two Folders)
Now, write the following code in Handler as shown Below.
Handler Code
public class Handler : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string strResponse = "error";
try
{
string strFileName = System.IO.Path.GetFileName(context.Request.Files[0].FileName);
string strExtension = System.IO.Path.GetExtension(context.Request.Files[0].FileName).ToLower();
string strSaveLocation = context.Server.MapPath("~/Files/UploadFiles");
string filename = System.IO.Path.Combine(strSaveLocation, strFileName);
HttpPostedFile oFile = context.Request.Files[0];
oFile.SaveAs(filename);
System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
strResponse = javaScriptSerializer.Serialize(strFileName);
}
catch (Exception Ex)
{
strResponse = Ex.Message;
}
context.Response.Write(strResponse);
}
public bool IsReusable {
get {
return false;
}
}
ScreenShot of Handler Code
Write the Following Code in Default page as shown Below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.ajax_upload.0.6.min.js"></script>
<script src="JavaScript.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="Button" runat="server" value="Browse" id="browsefilebtn" />
</div>
<div id="divItemfiles" runat="server">
</div>
</form>
</body>
</html>
Note: We need not write any Code in .cs Page.
Output:
Click on Browse Button and Now, u can upload Files as shown Below.
No comments:
Post a Comment