Upload a File with Javascript

Question

User911209228 posted

Hi,

I have a small asp.net application. in my application have a input file upload control and a button. I want to upload a file with javascript method. I want to avoid unnessary postback during file upload. How can i do this.

Thanks & Regards,

Dileep

Answer 1

User-1330468790 posted

Hi dileep Sanker,

 

Are your asp.net application a webforms application?

 

You could use ajax + FileUploadHandler (Generic Handler) to upload file and avoid a postback behavior.

 

More details, you can refer to below demo.

aspx:

 <form id="form1" runat="server">
        <div>
            <asp:FileUpload ID="uploader" CssClass="attachment"  runat="server"  />
            <input id="uploadBtn" type="button" value="Click" />
        </div>
    </form>
    <script>
        $(function () {
            $("#uploadBtn").on("click", uploadFile);
        });

        function uploadFile() {
            var formData = new FormData();

            var fileUpload = $('#<%=uploader.ClientID%>').get(0);
            var files = fileUpload.files;


            for (var i = 0; i < files.length; i++) {
                console.log(files[i].name);
                formData.append(files[i].name, files[i]);
            }

           
            $.ajax({
                url: "<%= ResolveUrl("FileUploadHandler.ashx") %>",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (result) {
                    alert(result);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });
        }
    </script>

FileUploadHandler.ashx.cs:

 public class FileUploadHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                HttpFileCollection files = context.Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFile file = files[i];
                    string fname = context.Server.MapPath("~/uploads/" + file.FileName);
                    file.SaveAs(fname);
                }
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("File(s) Uploaded Successfully!");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

Demo:

 

Hope helps.

Best regards,

Sean