on click function to upload file

Question

I am trying to make a file uploader in asp.net that uploads files and also show them in my grid and can aslo view them but I dont want to use asp controls. I want to do so by using html tags. All the tutorials that I have seen uses asp controls. Below is my html:

               <tr>
                <td class="label" style="width:15%">
                File Name
                 </td>
                <td class="description" >
                <input type="text" id="txtFileName" class="largeTextField"  style="width:260px;"/>
               </td>

               <div class="validator" id="txtFileNameVld" style="display: none">
                                                        *</div>

                                            </tr>


               <tr>                              
               <td class="label" style="width:15%">
                Upload File
                </td>
                 <td class="description" >
                <input type="file" id="FileUpload1" class="largeTextField" multiple="multiple"   
                style="width:260px;"/>
               <input type="button" id="btnUpload" value="Upload"  onclick="Upload" />
               </td>

                <div class="validator" id="txtUploadFileVld" style="display: none">
                                                        *</div>

                                            </tr>

I want to create a function for upload but I have seen all the links.Cannot find anywhere and I have no idea how to do this. Can somebody help me?

Answer 1

Single file with Extention check

function Upload() {
    var fileInput = document.getElementById('files');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpg)$/;
    if (!allowedExtensions.exec(filePath)) {
        alert('this file is not allowed to upload')
        fileInput.value = '';
        return false;
    }
    var formData = new FormData(this);
    $.ajax({
        url: '/AjaxFileUpload/UploadFiles',
        type: 'POST',
        data: formData,
        success: function (data) {
            //Success Message
        },
        error: function (xhr, status, error) {
            if (status === "timeout") {
                alert(msg_timeout);
            } else {
                alert(msg_error);
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

For Multi-file Upload Please refer Below Link

https://www.yogihosting.com/jquery-file-upload/