jqueryasp.netjquery-file-upload

Enable button after File Upload


Using JQuery in ASP.net to upload files. After the upload is complete I want to enable visibility on a button for the user to continue to the next step. I've attempted using the show function without success.

Here's my code and html

<script>
        var counter;
        function UploadFile() {
            var files = $("#<%=UploadImages.ClientID%>").get(0).files;
            counter = 0;
            totalfiles = files.length;

            // Loop through files
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var formdata = new FormData();
                formdata.append("UploadImages", file);
                var ajax = new XMLHttpRequest();

                ajax.upload.addEventListener("progress", progressHandler, false);
                ajax.addEventListener("load", completeHandler, false);
                ajax.addEventListener("error", errorHandler, false);
                ajax.addEventListener("abort", abortHandler, false);
                ajax.open("POST", "fileuploadhandler.ashx");
                ajax.send(formdata);
            }
        }

        function progressHandler(event) {
            percent = ((counter + 1) / totalfiles) * 100;
            $("#progressBar").val(Math.round(percent));
        }

        function completeHandler(event) {
            $("btnContinue").show();
            counter++
            $("#status").html(counter + " files uploaded");
        }

        function errorHandler(event) {
            $("#status").html("Upload Failed");
        }

        function abortHandler(event) {
            $("#status").html("Upload Aborted");
        }
    </script>

<div class="row">
                <asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
                <input type="button" id="btnUpload" value="Upload Files" class="btn btn-lg btn-primary" onclick="UploadFile()" />
                <%--<asp:Label ID="listofuploadedfiles" runat="server" />--%>
                <br />
                <br />
                <progress id="progressBar" value="0" max="100" style="width: 300px; height: 50px;"></progress>
                <br />
                <h3 id="status"></h3>
                <p id="loaded_n_total"></p>
            </div>
            <div class="row">
                <asp:Button runat="server" CssClass="btn btn-lg btn-primary" ID="btnContinue" Text="Process Images" OnClick="btnContinue_Click" />
            </div>

Solution

  • It seems that you're simply missing # for the element selector reference?

    Change:

    $("btnContinue").show();
    

    To:

    $("#btnContinue").show();