Description:-
In previous
example we already explain that how to restrict the size of file when uploaded
by user through fileupload control Restrict size of file upload in asp.net.but now in this example we
explain that how to get the size of file or image size before uploading to the
server using jquery in asp.net.
File uploading functionality is generally used by
the every developers to uploading file
on the server.but knowing file size before uploading is a good thing because we can restrict the end user to upload large
size files on the server since we have limited space on the server.
.Net provides both facility to check uploaded file size on server side as well
client side. In this example we explain that
how to get size of file or image
size before uploading on client side using JQuery.
Here is a Jquery code to define the size limit of
the uploaded file before uploading to the server.
$("#<%=upload1.ClientID %>").fileUpload({
'uploader': 'scripts/uploader.swf',
'cancelImg': 'cancel.png',
'buttonText': 'Select Files',
'script': 'Handler.ashx',
'folder': 'images',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true,
'sizeLimit': (100 * 1024), //200 KB
onError: function (a, b, c, d) {
if (d.type === "File Size") {
$("#lblmsg").html('File Size Should not exceed 100 KB');
}
},
onComplete: function () {
$("#lblmsg").html('');
}
});
Look at this above code in which we predefined the
size of file is 100 KB. So if user upload the larger file then 100 kb then
Appropriate message will be displayed to the user.
MVC Registration Form with client and server side validation Validation in Registration Form in MVC4
Upload multiple file with progressbar Uploading multiple file at a time with progressbar
Default.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery Image Size before Upload using
uploadify plugin</title>
<link rel="Stylesheet" type="text/css" href="uploadify.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.js"></script>
<script type = "text/javascript">
$(function () {
$("#<%=upload1.ClientID %>").fileUpload({
'uploader': 'scripts/uploader.swf',
'cancelImg': 'cancel.png',
'buttonText': 'Select Files',
'script': 'Handler.ashx',
'folder': 'images',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true,
'sizeLimit': (100 * 1024), //200 KB
onError: function (a, b, c, d) {
if (d.type === "File Size") {
$("#lblmsg").html('File Size Should not exceed 100 KB');
}
},
onComplete: function () {
$("#lblmsg").html('');
}
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:FileUpload ID="upload1" runat="server" />
<br />
<label id="lblmsg" style="font-weight:bold; color:Red" />
</form>
</body>
</html>
Handler.ashx:-
<%@ WebHandler Language="C#" Class="Handler" %>
using
System;
using
System.Web;
using
System.IO;
public class Handler : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string
tempPath = "";
HttpPostedFile uploadFiles = context.Request.Files["Filedata"];
string
pathToSave = HttpContext.Current.Server.MapPath("~/images/") + uploadFiles.FileName;
uploadFiles.SaveAs(pathToSave);
context.Response.Write(tempPath + "/" + uploadFiles.FileName);
context.Response.StatusCode = 200;
}
public bool IsReusable {
get {
return false;
}
}
}
0 comments:
Post a Comment