uploading image to server in ajax

Question

Following is my form

<form id="postProblemForm" action="/Problems/Post"  method="post">
<input type="text" id="problemSubject" name="problemSubject" class="inp-form"/>
<input type="file" id="uploadFile" name="uploadFile"/>
<textarea rows="" cols="" class="form-textarea" id="problemDescription" name="problemDescription"></textarea>
</form>

I have to send this form to controller. Controller code is

[HttpPost]

        public void Post(FormCollection form) 
        {
            string subject = form["problemSubject"];
            string description = form["problemDescription"];
            HttpPostedFileBase photo = Request.Files["uploadFile"];

        }

I can get "problemSubject" and "problemDescription" values easily. But don't know how to get uploaded image and save it at server side. I wanna save at "~/ProblemImages". Pls help.

What were your search keywords? did you try something like: `upload file with jQuery` in google? I'm sure you would have got the answer by now. — gdoron, Apr 11 '13 at 05:23
I used those words and found that is what asked before, many times, including here. — gdoron, Apr 11 '13 at 05:25
possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — gdoron, Apr 11 '13 at 05:25

ePezhman · Answer 1 · 2013-04-11T08:03:34.137

You Can not transfer files into controller by FormCollection, you need to use something like this:

        [HttpPost]
        public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments)
        {
            // The Name of the Upload component is "attachments" 
            foreach (var file in attachments)
            {
                // Some browsers send file names with full path. This needs to be stripped.
                var fileName = Path.GetFileName(file.FileName);
                var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                file.SaveAs(physicalPath);
            }
            // Return an empty string to signify success
            return Content("");
        }

and also you doing it without getting help from any plugin is not a good idea, I used a few plugins and I found the Kendo UI upload plugin nice, here is a link how it works:

http://demos.kendoui.com/web/upload/async.html

and you can find the sample project here: http://www.kendoui.com/forums/ui/upload/upoad-with-mvc.aspx

uploading image to server in ajax

1 Answers1