Home / Questions / 39760
Accepted
eezzekl
Asked: 2020-12-18 13:56:50 +0800 CST 2020-12-18 13:56:50 +0800 CST

How do I get a file in JS and send it to ASP.net

  • 772

Good day. I am working with C# and ASP.Net on the server side and with JS and html on the client side.

I have a form similar to this

<form id='frmForm'>
<label>Subir Archivo</label>
<input type ='file' id='file' />
<button>Guardar</button>
</form>

What I want is to obtain the file through js and send it to my server through AJAX as one more parameter, since in reality I send several more fields.

If you could guide me on how to do this function, both on the client side and as what type of data I receive from the server side

Cheers

javascript

1 Answers

  1. Best Answer

    First there are several things you need to do on the server: 1. Define a file type control like this 2. You need to create a button that calls a JavaScript function that takes care of selecting the file and calling the Ajax function. Try it 3. You must define the JavaScript function, something like this: function LoadFile() { var x = document.getElementById("myFile"); } 4. In the function you must define the Ajax that communicates with the function on the server.

    For example: On the client it can be something like this:

    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnUploadFile').on('click', function () {

                var data = new FormData();

                var files = $("#fileUpload").get(0).files;

                // Add the uploaded image content to the form data collection
                if (files.length > 0) {
                    data.append("UploadedImage", files[0]);
                }

                // Make Ajax request with the contentType = false, and procesDate = false
                var ajaxRequest = $.ajax({
                    type: "POST",
                    url: "UploadPage.aspx",
                    contentType: false,
                    processData: false,
                    data: data
                });

                ajaxRequest.done(function (xhr, textStatus) {
                    // Do other operation
                });
            });
        });
    </script>

    On the server it can be something like this:

    public partial class UploadPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];
            if (httpPostedFile != null)
            {
                var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);

                // Save the uploaded file to "UploadedFiles" folder
                httpPostedFile.SaveAs(fileSavePath);
            }
        }
    }

    • 1