Upload file using Ajax call using ASP.NET MVC

Question

I would like to upload a file in my page using:

<input type="file" name="FileName">

I have a button, clicking on which an ajax post is done.

$.ajax({
           cache: false,
           async: true,
           type: "POST",
           url: '@Url.Content("~/OCR/OCRProcessor")',
           data: '',
           success: function (data) {
               $('#ocrresult').val(data);
           }
       });

I would like to get the file uploaded in the controller action method something like below:

HttpPostedFileBase hpf = Request.Files["FileName"] as HttpPostedFileBase 

Please let me know the optimal way to achieve this task.

Solution

jquery Forms plugin (GitHub Link)would be an ideal choice in this context. You can simply do it like this. (Include the file input in this form)

$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

Demo

This would be a No plugin approach (only in Html5), but I'm still recommending the plugin

$("#myFormId").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: "YourPath/ToAction",
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

Another nice plugin.

Comments

[Shanky]

Can you suggest any way to do this without using jquery Plugin.

[Shanky]

I would like to know if it can be achieved just by using the .ajax()

[Subin Jacob]

using html5 formdata object you can do it. This jQuery plugin is also doing the same. But it has its own fall back mechanism if Html5 is not supported

[Shanky]

i will try that. But please let me know if any other ways are there to achieve this.