upload file with other parameters through ajax in asp.net mvc

Question

I am working in asp.net mvc using c#.

I want to upload an image which is selected from file browser window and is included inside a form tag.

<form id="uploader" method="post" enctype="multipart/form-data">
 <input type="file" name="file" id="fileInput"/>

In the same view,I have other fields which is not a part of the form.I am sending those fields through ajax by converting them to JSON Object..Along with this i want to add the image also...Please help me to do this...

Answer 1

As question not much clear I'm showing example here what I assumed.

you can use jquery forms plugin.

Add jquery forms plugin

<script src="http://malsup.github.com/jquery.form.js"></script>

ViewPage

@using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    //I assume other fields are 
    <input id="FirstName" name="FirstName" type="text"/>
    <input id="LastName" name="LastName" type="text"/> 
    //Image upload
    <input type="file" name="files"> 
    <br>
    <input type="submit" value="Upload File to Server">
}

Controller

        [HttpPost]
        [ValidateAntiForgeryToken]
        public void YourAction(IEnumerable<HttpPostedFileBase> files, string FirstName, string LastName)
        {
            if (files != null)
            {
                foreach (var file in files)
                {
                    // Verify that the user selected a file
                    if (file != null && file.ContentLength > 0)
                    {
                        // extract only the fielname
                        var fileName = Path.GetFileName(file.FileName);
                        // TODO: need to define destination
                        var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                        file.SaveAs(path);
                    }
                }
            }
        }

Answer 2

If you want to send a file via AJAX, you can use HTML5 FileReader API.

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

The API allows you to read the contents of the files (from https://developer.mozilla.org/en-US/docs/Web/API/FileReader):

FileReader.readAsArrayBuffer()

Starts reading the contents of the specified Blob, once finished, the result attribute contains an ArrayBuffer representing the file's data.

FileReader.readAsBinaryString()

Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.

FileReader.readAsDataURL()

Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.

FileReader.readAsText()

Starts reading the contents of the specified Blob, once finished, the result attribute contains the contents of the file as a text string.

You can then send the contents of the file as Base64 encoded string with all other data that you have.

Note that this works only in IE10+ and other modern browsers.