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>
It seems that you're simply missing #
for the element selector reference?
Change:
$("btnContinue").show();
To:
$("#btnContinue").show();