passing file to controller without using form,

Question

guys i am trying to load file from view to controller with out using form , while browsing a file the file should be loaded to controller using Ajax ,is it possible?

        <td>Import Excell file:</td>                                
        <td><input type="file" id="fileUpload" name="fileUpload" /></td>



$('#fileUpload').die().live("change", function (e) {
        e.preventDefault();
        var file_name = $("#fileUpload").val();
        var fileName = $("#fileUpload").val();
        var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);     
        var file_data = $("#fileUpload").prop("files")[0];



        var form_data = new FormData();
        form_data.append("file", file_data);
        alert("hahaha");
        $.ajax({
            type: 'POST',     
            url: '@Url.Action("ImportExcell","Uploadfile")',
            data: form_data,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (response) {
                alert(response);
            }
        });
    });

It is possible with FormData, but this solution may not run in some old browser versions like IE9. If you are only targeting new browsers, I can give you solution. — ramiramilu
– ramiramilu, Commented Jul 5, 2015 at 6:31

ramiramilu · Accepted Answer · 2015-07-05 11:50:15Z

Here goes the solution using FormData. One caveat with this solution is that FormData support is only available in modern browsers, so do not expect this to work with old browsers like IE7 - 9 etc.

Create a controller action in following way -

public JsonResult GetFormData(HttpPostedFileBase file, string Name)
{
    return Json(true);
}

Then your HTML would be -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $(function () {
        $("#btnSubmit").click(function () {
            $.ajax({
                url: "/Home/GetFormData",
                type: "POST",
                data: function () {
                    var data = new FormData();
                    data.append("name", jQuery("#name").val());
                    data.append("file", jQuery("#file").get(0).files[0]);
                    return data;
                }(),
                contentType: false,
                processData: false,
                success: function (response) {                        
                },
                error: function (jqXHR, textStatus, errorMessage) {
                    console.log(errorMessage);
                }
            });
        });
    });
</script>    

Name : <input type="text" id="name" /> <br />
File: <input type="file" id="file" /> <br />
<input type="button" value="Click" id="btnSubmit" />

When the view is rendered and entered with some information -

enter image description here

When you click button, Output would be -

enter image description here

Collectives™ on Stack Overflow

passing file to controller without using form,

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related