How to use the jQuery script for the FileUploads procedure

Question

Friends,

Please share your knowledge on the following requirements since I am using the ASPX VB 2019 tool;

1. Only 2MB JPG, PNG, BMP, or PDF files from the client can be uploaded; these files should be kept in a separate folder (like StudentCVFiles)
2. The uploaded file names should be prefix with currect DayHhMmss (Format ddhhmmss, like this 07101533) FileName like 07101533_JohnBiodata.pdf
3. After clicking a separate Upload Button (BtnUpload) to initiate the uploading process, the FileUpload control must be used.
4. The client must view the file's upload status in % (status Bar). The client may receive a message of alert like " Hi, Your file has been uploaded successfully"
5. The file name should display a Label control (lbl_UploadedFileName) once uploading is complete, such as lbl_UploadedFileName with Prefixed filename with file extension.

These items need to be completed using the jQuery script.

My design code is enclosed.

<div id="PopuBankDocUL" class="modal fade" role="dialog" data-backdrop="static">  
                            <div class="modal-dialog">  
                                <div class="modal-content">  
                                    <div class="modal-header" style="background-color: #008FBD; color: #fff;">  
                                        <button type="button" class="close" data-dismiss="modal" style="background-color: red; padding-left: 5px; padding-right: 5px; color: #fff;">&times;</button>  
                                        <h3 class="modal-title">Claiment Bank Statement/Passbook/Cheque Upload</h3>  
                                        <asp:Label ID="lbl_rowid" runat="server" ForeColor="#CCFF99"></asp:Label>  
                                    </div>  
                                    <div class="modal-body">   
                                        <div>  
                                            <div class="row table-responsive" id="pnl_DocProp" runat="server" style="overflow-y: auto">  
                                                <div class="box box-default" style="left: 0px; top: 0px">  
                                                    <div class="box-header with-border" style="left: 0px; top: 0px">  
                                                        <h3 class="box-title" style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"><b>Pls upload scanned Image/PDF Only, allowed 2MB File size</b></h3>  
                                                        <div class="box-tools pull-right">  
                                                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>  
                                                        </div>  
                                                    </div>  
                                                    <!-- /.box-header -->  
                                                    <div class="box-body">  
                                                          
                                                        <div class="auto-style3">  
                                                            <div class="form-group">  
                                                                <label>Loan ID</label>  
                                                                <asp:Label ID="lbl_LoanID" runat="server" Text="000" CssClass="form-control smalltext" BorderColor="#0066FF" BorderStyle="Solid" BorderWidth="1px"></asp:Label>  
                                                            </div>  
                                                        </div>  
                                                        <div class="col-md-3">  
                                                            <div class="form-group">  
                                                                <label>Died Person</label>  
                                                                <asp:Label ID="lbl_DiedPersonName" runat="server" Text="" CssClass="form-control smalltext" BorderColor="#0066FF" BorderStyle="Solid" BorderWidth="1px"></asp:Label>  
                                                            </div>  
                                                        </div>  
                                                         <div class="col-md-3">  
                                                            <div class="form-group">  
                                                                <label>Bank Name</label>  
                                                                <asp:Label ID="Lbl_BankName" runat="server" Text="" CssClass="form-control smalltext" BorderColor="#0066FF" BorderStyle="Solid" BorderWidth="1px"></asp:Label>  
                                                            </div>  
                                                        </div>  
                                                        <div class="col-md-3">  
                                                            <div class="form-group">  
                                                                <label>Bank Acct No.</label>  
                                                                <asp:Label ID="lbl_BankAcctNo" runat="server" Text="" CssClass="form-control smalltext" BorderColor="#0066FF" BorderStyle="Solid" BorderWidth="1px"></asp:Label>  
                                                            </div>  
                                                        </div>  
                                                        <div class="col-md-6">  
                                                            <div class="form-group">  
                                                                <label>01.Bank Proof Type *</label>  
                                                                <asp:DropDownList ID="ddlBankDocType" runat="server" CssClass="form-control" Width="170px">  
                                                                <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>  
                                                                <asp:ListItem Text="Bank Statement" Value="1"></asp:ListItem>  
                                                                <asp:ListItem Text="Bank Passbook" Value="2"></asp:ListItem>  
                                                                <asp:ListItem Text="Cancelled Cheque" Value="3"></asp:ListItem></asp:DropDownList>  
                                                                <asp:RequiredFieldValidator ID="Rfv_DDLBankDoc" runat="server" ErrorMessage="Please Select a Bank Document Type!" InitialValue="0" ControlToValidate="ddlBankDocType" ValidationGroup="group2" Display="None" ></asp:RequiredFieldValidator>  
                                                            </div>  
                                                        </div>  
  
                                                        <div class="col-md-6">  
                                                            <div class="form-group">  
                                                                <label>02.Bank Last Transaction Date *</label>  
                                                                <div class="input-group date">  
                                                                    <div class="input-group-addon">  
                                                                        <i class="fa fa-calendar"></i>  
                                                                    </div>  
                                                                    <asp:TextBox ID="txt_TransactionDate" runat="server" CssClass="form-control" placeholder="Future Date NotAllow" Width="200px" autocomplete="off"></asp:TextBox>  
                                                                    </div>  
                                                                </div>  
                                                        </div>  
                                                       
                                                        <div class="col-md-6">  
                                                            <br />  
                                                            <div class="form-group">  
                                                                <label>3.Pls Upload Bank Proof</label><label style="color: red;"> *</label>  
                                                                <asp:FileUpload ID="FUBankProof" class="form-control" Width="250px" runat="server" accept=".bmp,.gif,.png,.jpg,.jpeg,.pdf" />  
                                                                <asp:RequiredFieldValidator ErrorMessage="Please upload only Image or PDF files only" ControlToValidate="FUBankProof" runat="server" Display="None" />  
                                                                <asp:RegularExpressionValidator ID="RValFu1" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+(.bmp|.BMP|.gif|.GIF|.png|.PNG|.jpg|JPG|.jpeg|.JPEG|.pdf|.PDF)$" ControlToValidate="FUBankProof" runat="server" ErrorMessage="JPG|PDF|Image Files Only" Display="None" />  
                                                                <asp:CustomValidator ID="Cvali_FuSize" runat="server" ErrorMessage="" ControlToValidate="FUBankProof" ClientValidationFunction="fUpload1();"/>  
                                                                                                                               
                                                            </div>  
                                                        </div>  
                                                        <div class="col-md-3">  
                                                            <br />  
                                                            <div class="form-group">  
                                                                <label>04.For Upload</label>  
                                                                <asp:Button ID="BtnUpload" runat="server" Text="Click Upload" class="btn btn-primary"  Visible="true" ></asp:Button>   
                                                            </div>  
                                                        </div>  
                                                        <div class="col-md-12">  
                                                        <h5><asp:Label ID="lblfilepath" runat="server" Text="" ForeColor="#CC0000"></asp:Label></h5>  
                                                            </div>  
                                                         <div class="col-md-3">  
                                                            <div class="form-group">  
                                                                <label>05.To File View</label>  
                                                                <asp:ImageButton ID="ImgBtn_Preview" runat="server" ImageUrl="~/Images/dwnload_ico.png" Height="30px" Width="30px" />  
                                                                </div>  
                                                            </div>  
                                                        <div class="col-md-6">  
                                                            <div class="form-group">  
                                                                <label>04.Remarks</label>  
                                                                <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" TextMode="SingleLine" placeholder="100 Chars only" MaxLength="100" Style="text-transform: uppercase" onkeydown="return((event.keyCode >= 65 && event.keyCode <= 120) || (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode==8)|| (event.keyCode==9) || (event.keyCode==55) || (event.keyCode==16) || (event.keyCode==110) || (event.keyCode==190) || (event.keyCode==188) || (event.keyCode==35) || (event.keyCode==36) || (event.keyCode==37) || (event.keyCode==38) || (event.keyCode==39) || (event.keyCode==40) || (event.keyCode==46) || (event.keyCode==32));"></asp:TextBox>  
                                                            </div>  
                                                        </div>  
                                                         
  
                                                        <div class="col-md-12">  
                                                            <center>   
                                                            <div class="row">  
                                                              <asp:Button ID="btnImgsubmit" runat="server" Text="Save"  class="btn btn-primary" Visible="true" ></asp:Button>  
                                                              &nbsp;<asp:Button ID="Button1" runat="server" Text="Reset"  class="btn btn-danger" Visible="true" ></asp:Button>  
                                                              &nbsp;<button class="btn btn-danger" data-dismiss="modal" type="button">Close</button>  
                                                             </div>  
                                                              </center>  
                                                        </div>  
  
                                                    </div>  
                                                </div>  
                                            </div>  
                                        </div>  
                                    </div>  
  
                                </div>  
                            </div>  
                        </div>  

Answer 1

Hi @Ayyappan CNN ,

Only 2MB JPG, PNG, BMP, or PDF files from the client can be uploaded;

You can get the uploaded file size:

  var f = this.files[0].size;  

The uploaded file names should be prefix with currect DayHhMmss (Format ddhhmmss, like this 07101533) FileName like 07101533_JohnBiodata.pdf

You can set a new date and then set the format you want.

var dt = new Date();  
var time = dt.getDate() + "" + dt.getHours() + "" + dt.getMinutes() + "" + dt.getSeconds();  

The file name should display a Label control (lbl_UploadedFileName) once uploading is complete, such as lbl_UploadedFileName with Prefixed filename with file extension.

document.getElementById('<%= lbl_UploadedFileName.ClientID %>').innerHTML = time + "_" + fi;  
<asp:Label ID="lbl_UploadedFileName" runat="server"  ></asp:Label>  

The client must view the file's upload status in % (status Bar). The client may receive a message of alert like " Hi, Your file has been uploaded successfully"

This requirement is difficult to complete with jQuery alone, and needs to rely on the backend. Can you provide the backend code?

I suggest that you learn jQuery first, try it yourself, and ask for help when you encounter problems.

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi
I solved this, ref my script

<script type="text/javascript">  
            function btnfileUload() {  
            $.ajax({  
                url: 'Handler.ashx',  
                type: 'POST',  
                data: new FormData($('form')[0]),  
                cache: false,  
                contentType: false,  
                processData: false,  
                success: function (file) {  
                    $("#lblfuMessage").html("The file was uploaded successfully");  
                    $("#lbl_UploadedFileName").html(file.name);  
                    $('[id$=BtnUpload]').attr('disabled', 'disabled');  
                    $('[id$=FUBankProof]').attr('disabled', 'disabled');  
                },  
                error: function (response) {  
                    alert(response.responseText);  
                },  
                failure: function (response) {  
                    alert(response.responseText);  
                },  
                xhr: function () {  
                    var fileXhr = $.ajaxSettings.xhr();  
                    if (fileXhr.upload) {  
                        $("progress").show();  
                        fileXhr.upload.addEventListener("progress", function (e) {  
                            if (e.lengthComputable) {  
                                $("#fileProgress").attr({  
                                    value: e.loaded,  
                                    max: e.total  
                                });  
                            }  
                        }, false);  
                    }  
                    return fileXhr;  
                }  
            });  
        }  
    </script>  

*ref by ashx*   
  
**Handler.ashx**  
  
Imports System  
Imports System.IO  
Imports System.Net  
Imports System.Web  
Imports System.Web.Script.Serialization  
Public Class Handler  
    Implements System.Web.IHttpHandler  
    Dim CurDtTS As String = Date.Now.ToString("ddhhmmss") + "_"  
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest  
        If context.Request.Files.Count > 0 Then  
            Dim postedFile As HttpPostedFile = context.Request.Files(0)  
            Dim folderPath As String = context.Server.MapPath("~/ICT_ImpFiles/BankProofs/")  
            Dim fileName As String = CurDtTS + Path.GetFileName(postedFile.FileName)  
            postedFile.SaveAs(folderPath + fileName)  
            Dim json As String = New JavaScriptSerializer().Serialize(New With {.name = fileName})  
            context.Response.StatusCode = CInt(HttpStatusCode.OK)  
            context.Response.ContentType = "text/json"  
            context.Response.Write(json)  
            context.Response.End()  
        End If  
    End Sub  
  
    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable  
        Get  
            Return False  
        End Get  
    End Property  
  
End Class