CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvc-4upload
levi
levi

Reputation: 3511

Send Uploading Files Together With Form Data

var formData = new FormData($("form#neweventform")[0]);

$.ajax({
    url: "/Event/NewEvent",
    type: "POST",
    data: formData,//JSON.stringify(saveEventModel),
    async: false,
    dataType: 'json',
    //contentType: 'application/json; charset=utf-8',
    cache: false,
    contentType: false,
    processData: false,
    fail: function (r) {
        alert('error.');
    },
    success: function (result) {
        }
...

On the controller side I have:

public JsonResult NewEvent(EventModel saveEventModel, List<HttpPostedFileBase> files)
        {
    }

I receive file in List<HttpPostedFileBase> files object but it's null. May be data is not posted to the server?

I think I'm doing something wrong conceptually. :/

How to upload images together with other form data like name, date, address etc.?..

Upvotes: 4

Views: 2486

Answers (1)

HANiS
HANiS

Reputation: 660

Is this what you're looking for?

C# MVC controller

public class UploadController : Controller
{
    [HttpPost]
    public JsonResult FilesList(List<HttpPostedFileBase> myFiles)
    {
        string message;
        if (myFiles == null)
        {
            message = "myFiles is null";
        }
        else if (myFiles.Count != 2)
        {
            message = "myFiles.Count is " + myFiles.Count;
        }
        else
        {
            message = string.Format("myFiles[0] is {0}, myFiles[1] = {1}",
                myFiles[0] == null ? "null" : myFiles[0].FileName,
                myFiles[1] == null ? "null" : myFiles[1].FileName);
        }

        return Json(new
        {
            Message = message
        });
    }
}

HTML + Javascript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>File Upload Demo </title>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function ()
        {
            $('#sendButton').click(function ()
            {
                var form = $('#myForm')[0];
                var formData = new FormData(form);

                $.ajax({
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    type: 'POST',
                    url: 'Upload/FilesList',
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        alert('failure\n' + textStatus);
                    },
                    success: function (data, textStatus, jqXHR)
                    {
                        alert(data.Message);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        File 1: <input type="file" name="myFiles" /><br />
        File 2: <input type="file" name="myFiles" />
    </form>

    <button id="sendButton">Submit over AJAX</button>
</body>
</html>

Upvotes: 3

Related Questions