%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<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 () {
$("#fileupload").change(function () {
var ext = $(this).val().split('.').pop().toLowerCase();
var fileListToUpload = new Array('pdf', 'txt', 'doc', 'docx', 'xls','xlsx');
var isValidFile = $.inArray(ext, fileListToUpload);
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 {
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');
}
}
});
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>