Category >
ASP.NET
|| Published on :
Wednesday, January 27, 2016 || Views:
8731
||
validate the file type and file size of File Upload control
Introduction
Here Pawan Kumar will explain how to jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event?
Description
In previous post I have explained
Code Snippets - Sending SMS through ASP.NET,
Cascading dropdown in ASP.NET using JQuery Http Handler,
How to add current copyright year in ASP.NET,
How to avoid a form from double submission using asp.net,
Set max length of MultiLine TextBox in ASP.Net,
Allow only alphabets in a textbox using javascript in asp.net, and many more articles.
Now I will explain How to jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event
So follow the steps to learn jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event
%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--Refer the jQuery library into your web page--%>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/* Attach a change event to the file upload control
to restrict the file type and file size on file selection. */
$("#fileupload").change(function () {
// Get the file upload control file extension
var ext = $(this).val().split('.').pop().toLowerCase();
// Create array with the files extensions to upload
var fileListToUpload = new Array('pdf', 'txt', 'doc', 'docx', 'xls','xlsx');
//Check the file extension is in the array.
var isValidFile = $.inArray(ext, fileListToUpload);
// isValidFile gets the value -1 if the file extension is not in the list.
if (isValidFile == -1) {
ShowMessage('Please select a valid file of type pdf/txt/doc/docx/xls/xlsx.', 'error');
$(this).replaceWith($(this).val('').clone(true));
}
else {
// Restrict the file size to 10 MB.
if ($(this).get(0).files[0].size > (1024 * 1024 * 10)) {
ShowMessage('File size should not exceed 10MB.', 'error');
$(this).replaceWith($(this).val('').clone(true));
}
else {
ShowMessage('Thank you for selecting a valid file.', 'success');
}
}
});
// Dynamic function to show the messages on the page
function ShowMessage(message, type) {
if (type == 'success') {
$("#fileStatus").removeClass('error');
$("#fileStatus").addClass('success');
}
else if (type == 'error') {
$("#fileStatus").removeClass('success');
$("#fileStatus").addClass('error');
}
$("#fileStatus").text(message);
}
});
</script>
<style>
.error
{
color: red;
font-size: 17px;
}
.success
{
color: green;
font-size: 17px;
}
</style>
</head>
<body>
<form id="formFile" runat="server">
<b>Upload File:</b>
<asp:FileUpload ID="fileupload" runat="server" /><br />
<asp:Label ID="fileStatus" Text="" CssClass="error" runat="server" />
</form>
</body>
</html>
Conclusion:
So, In this tutorial we have learned, jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event