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.

Subin Jacob · Accepted Answer · 2015-03-09 08:33:59Z

10

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.

edited Mar 9, 2015 at 8:33

answered Mar 4, 2014 at 8:36

Subin Jacob

4,92410 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shankar Over a year ago

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

Shankar Over a year ago

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

Subin Jacob Over a year ago

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

Shankar Over a year ago

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

SAVe · Accepted Answer · 2019-05-21 06:39:38Z

Code show here

        if (window.FormData !== undefined) {

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


                var fileData = new FormData();
                fileData.append('Type', Type );  //other requered pass data
                fileData.append('name', dataRow.CustomerName);  //other requered pass data
                fileData.append('Id', dataRow.InvoiceId);  //other requered pass data
                fileData.append('subject', Sub);  //other requered pass data
                fileData.append('message', Mess);  //other requered pass data

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

                $.ajax({
                    url: '/Email/SendEmail',
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: fileData,                     
                    success: function (data) {

            if (data == "No") {
                alert("Email Not Exist in Customer Master." );
            }
            if (data == "Not") {
                alert("Email Not Exist in System Setting.");
            }
            if (data == "NotExist") {
                alert("File Not Exist or Some Other Error");
            }
            if (data == "PassNot") {
                alert("Email Password Not Exist in System Setting.");
            } 
            if (data == "NotFile") {
                $('btn-Print').trigger('click');
            }
                    },
                    error: function (err) {
                        alert(err.statusText);
                    }
                });
            } else {
                alert("FormData is not supported.");
            }

Collectives™ on Stack Overflow

Upload file using Ajax call using ASP.NET MVC

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related