How to Save image into project folder using jQuery in ASP.NET?

Question

I'm new to ASP.NET and would be grateful if someone could help. I have my file input in a view:

 <input type="file" name="Image" id ="filename" />
 <input type="submit" value="Submit" id ="sub" />

Then in the script i send it's value to my Action in a Controller

$(function () {
    $.post("Home/NewProject", {Image: $("#filename").val() }, function (data) {});
});

In the Controller's action i get the filename, and rename it as one which will be stored in my project folder ~/App_Data/uploads

[HttpPost]
public ActionResult NewProject(Project model)
{
    if (ModelState.IsValid)
    {
         bool ok = false;
         ViewBag.Message = "Publish your project." ;
         //var photo = WebImage.GetImageFromRequest();
         var fileName = model.Image;

         // store the file inside ~/App_Data/uploads folder
         var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
         model.Image = path;
    }
}

But how can I actually SAVE this file into folder? Thanks in advance!

Do you want upload file to server with Ajax?

AliRıza Adıyahşi
– AliRıza Adıyahşi

2013-03-01 08:38:10 +00:00
Commented Mar 1, 2013 at 8:38 — AliRıza Adıyahşi
– AliRıza Adıyahşi, Commented Mar 1, 2013 at 8:38

Darin Dimitrov · Accepted Answer · 2013-03-01 08:39:05Z

1

You cannot upload files using jQuery ajax. If the client browser supports the HTML5 File API you could achieve that with the XHR2 object as shown in this article. If not you could use some file upload plugin such as Fine Uploader, Uploadify or the jquery.form plugin.

Here's an example with the jQuery form plugin:

@using (Html.BeginForm("someaction", "somecontroller", FormMethod.Post, new { id = "myForm", enctype = "multipart/form-data" }))
{
    <input type="file" name="Image" id ="filename" />
    <input type="submit" value="Submit" id ="sub" />    
}

and then:

$(function() {
    $('#myForm').ajaxForm(function() {
        alert('thanks for submitting');
    });
});

answered Mar 1, 2013 at 8:39

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

1 Comment

Jeremy C. Over a year ago

sorry for gravedigging on this post by commenting but I'm a complete novice when it comes to jquery, javascript etc... but I need one of my forms to be able to upload an image (scan from doctors note) and then save it to one of the folders in my application, I don't see anywhere the path is being set as to where it is saved to, could you elaborate on that for a bit please?

Collectives™ on Stack Overflow

How to Save image into project folder using jQuery in ASP.NET?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related