How to upload image with all entered textbox value using AJAX in asp.net MVC 5 without Form or Beging form tag?

Question

I don't want to reload my page so i am using AJAX, here Index.cshtml page for image uploading with text box. This code is currently working but i want to pass data from cshtml page to controller side using of ajax without form tag.

<form class="form-horizontal" id="fc" action="@Url.Action("SaveAcademy", "Academy")" method="post" enctype="multipart/form-data">
                            @Html.AntiForgeryToken()

    <input type="text" class="form-control" onblur="checktxtvalidation(this.id)" name="txtacademyname" id="txtacademyname">

    <input type="file" class="form-control" name="fileupload" id="fileupload" multiple="multiple">

    <input type="submit" value="submit" id="submit" name="submit" class="btn btn-block btn-primary" />

</form>

Controller

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SaveAcademy(HttpPostedFileBase fileupload, FormCollection fc)
{
....
.... here are some code for inserting data into database
....
}

You need to use `FormData` - refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) - see the last code snippet — , Jul 02 '15 at 11:29

Mustafa ASAN · Accepted Answer · 2015-08-12T09:44:03.823

<input type="file" class="form-control" name="fileupload" id="fileupload" >

it is not need to be in form tags.

<script type="text/javascript">

$('#fileupload').on('change', function (e) {
    var files = e.target.files;
    var text=$('#txtacademyname').val();
    if (files.length > 0) {
        var data = new FormData();
        data.append("file", files[0]);
        data.append("acatext", text);
        console.log(data);
        $.ajax({
            type: "POST",
            url: '@Url.Action("SaveAcademy","Academy")',
            contentType: false,
            processData: false,
            data: data,
            success: function (data) {
                alert(data);
            },
            error: function () {

            }

        });
    }
});

You can use a button to trigger upload or like my demo just use change event.And if you do not add processData: false to prevent automatic processing , you will get 'Illegal Invocation'.

 [HttpPost]
    public ActionResult SaveAcademy(HttpPostedFileBase file, string acatext)
    {
        if (file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var location = Path.Combine(
                Server.MapPath("~/Images"), fileName);
            file.SaveAs(location);
            return Json("File uploaded"+acatext);
        }
        else
        {
            return Json("Failed");
        }
    }

removed [ValidateAntiForgeryToken] if you want it , then you have to add it manually to your ajax header.

EDIT to make it work button click add button to page <input type="button" value="upload" id="upload" /> ,register click event

<script type="text/javascript">
    $('#upload').on('click', function (e) {
        var fileform = document.getElementById('fileupload');
        var files = fileform.files;
        var text=$('#txtacademyname').val();
        if (files.length > 0) {
            var data = new FormData();
            data.append("file", files[0]);
            data.append("acatext", text);
            console.log(data);
            $.ajax({
                type: "POST",
                url: '@Url.Action("SaveAcademy","Academy")',
                contentType: false,
                processData: false,
                data: data,
                success: function (data) {
                    alert(data);
                },
                error: function () {

                }

            });
        }
    });
</script>

onchange is trouble for me, i want to send on button click. that time how can i get file on button click ? — Sandip_JACK, Aug 12 '15 at 09:35
Add a button and register click event ,i added that to solution but you better learn some javascript to make things clear — Mustafa ASAN, Aug 12 '15 at 09:46
you do not need to make it submit button cause you do not have any form to submit make it type= button like in my last edit — Mustafa ASAN, Aug 12 '15 at 09:57

score 1 · Answer 2 · answered Aug 12 '15 at 06:50

1

Check this out

http://www.c-sharpcorner.com/UploadFile/b696c4/how-to-upload-and-display-image-in-mvc/

I hope it will be useful for you.

answered Aug 12 '15 at 06:50

Rahul Dubey

208
1
17

Rahul i want without **@using (Html.BeginForm("Create","Content", FormMethod.Post, new { enctype ="multipart/form-data" }))** because i dont want to reload page – Sandip_JACK Aug 12 '15 at 06:55
@Sandip_JACK this solution contains forms tags your actual question says no form tags ?? – Mustafa ASAN Aug 13 '15 at 07:00

How to upload image with all entered textbox value using AJAX in asp.net MVC 5 without Form or Beging form tag?

2 Answers2