CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcfile-upload
Gyuzal
Gyuzal

Reputation: 1591

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

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!

Upvotes: 0

Views: 4846

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

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');
    });
});

Upvotes: 1

Related Questions