How to do javascript file upload?

You can easily upload file on server using javascript, suppose, your HTML is like below

<input type="file" id="UploadFile" />

and now you want to upload file on changing file, you can call jQuery function on('change') and then implement javascript code to upload it

 //For Uploadingfile on file input change
            $(document).on('change', "#UploadFile", function () {
               //get files
                var fileInput = document.getElementById('UploadFile');
                //select only first file
                var file = fileInput.files[0];
               
                //create form data and append file in it
                var formData = new FormData();
                formData.append('file', file);


                //create variable for starting new XMLHttprequest
                var xhr = new XMLHttpRequest();
               
                xhr.onreadystatechange = function () {
                    //this will be called upon successful execution of file upload
                    if (this.readyState == 4 && this.status == 200) {
                        //do something here
                        console.log(xhr.responseText);
                       
                    }
                };
                var Id = $("#Id", "#FormAjax").val();
               
                // Add any event handlers here...
               //sending POST request to server
                xhr.open('POST', '/URLToUpload', true);
                xhr.send(formData);

                return false; // To avoid actual submission of the form, if needed

            })

Your front end code to send file to server using javascript is done.

[Continue reading if you are C# MVC developer]On the back-end, you can implement C# code in controller like below

       [HttpPost]
      
        public ActionResult UploadFile(int id)
        {
            var FileURL = "";
           
            // Get files
            HttpFileCollectionBase files = Request.Files;
            //loop through all the formData files
            for (int i = 0; i < files.Count; i++)
            {
               
               
                HttpPostedFileBase file = files[i];
                string fname;

                // Checking for Internet Explorer  
                if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
                {
                    string[] testfiles = file.FileName.Split(new char[] { '\\' });
                    fname = testfiles[testfiles.Length - 1];
                }
                else
                {
                    fname = file.FileName;
                }

                // Get the complete folder path and store the file inside it.  
                fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);

             

                file.SaveAs(fname);
            }
            // Returns the file URL that is successfully uploaded  
            return Json(FileURL);
            
        }

I have tested this code for my own project locally and it is working.

There is also another article related to File uploading using jQuery Ajax in MVC C#, you can take a look if needed.

Considering you have below HTML

 <input id="file" type="file" />

Javascript to file upload will be

let photo = document.getElementById("file").files[0];  // file from input
let req = new XMLHttpRequest();
let formData = new FormData();

formData.append("photo", photo);                                
req.open("POST", '/upload/image');
req.send(formData);

then on Server side, you need to get create a httppost request and get form values.

"photo" = name of the file contents on server side.