<h3>Upload  File</h3>

<form action="@Url.Action("Upload","UploadController")"  method="post" id="uploadForm" enctype="multipart/form-data">
    <div class="file-box">
        <input type="text" class="txt"/>
        <input type="button" value="Browser" class="fileInputbtn"/>
        <input type="file" class="fileInput" id="uploadFile" name="uploadFile"/>
        <input type="button" value="Upload" class="fileInputbtn" id="btnUpload"/>
        <input type="button" value="Cancel" class="fileInputbtn" id="btnCancel"/>
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $(".fileInput").change(function () {
            $(".txt").val($(this).val());
        });

        $("#btnCancel").click(function () {
            $(".txt").val("");
        });

        $("#btnUpload").click(function () {
            var filePath = $(".txt").val();
            if (filePath.length == 0) {
                alert("Please upload a file.");
                return;
            }
            var extension = filePath.split('.').pop();
            if (extension != "xlsx") {
                alert("Please upload a correct file(.xlsx).");
                return;
            }

            $("input[type='button']").attr("disabled", "disabled");
            $(".button_01").attr("disabled", "disabled");
            $(".error").html("Uploading... please don't close the browser.");
            $("#uploadForm").submit();
        });
    });
</script>