How to pass image file from view to controller using asp.net mvc3

Question

4.00/5 (1 vote)

See more:

Helo freinds,
How can i transfer image file using ajax or jquery from view to controller using asp.net mvc3.
My view file looks like

XML

<script type="text/javascript">
      $(document).ready(function () {



          $("#photos").kendoUpload();
          $("#save").click(function (event) {
              alert("started");
              url = 'Home/Details'
               var data = $('#photos').load(url)
               $.ajax({

                   type: "POST",

                   url: '/Home/Details',
                   //data: data,

                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (str) {
                       alert("hai");
                       alert(str.st);
                   }
               });
</script>

   <body>
    <input name="photos" id="photos" type="file" />  
  <input type="button" value="save" id="save" />
  
</body>

My controller file looks like

public ActionResult Details(HttpPostedFileBase data)
       {

           try
           {
              data = Request.Files[1];
               byte[] imageSize = new byte[data.ContentLength];
               data.InputStream.Read(imageSize, 0, (int)data.ContentLength);
               Image g = new Image();



               g.Img = imageSize;

               dbContext.Add(g);
               dbContext.SaveChanges();
               return RedirectToAction("Index");
           }
           catch
           {
           }
           var str = new { st = "saved" };
           return Json(str, JsonRequestBehavior.AllowGet);
       }

When i uploads the file and click it on save button my controller takes the null file.Is there any methos in html5 to transfer the file .If so please provide me any suggestions.
Waiting for your answers

Posted 25-May-12 18:46pm

Prasanna Kumari

Updated 25-May-12 19:05pm

hitech_s

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

govind giri · Answer 1 · 2012-05-25T19:55:00

Solution 1

Hi Prasanna,

It seems that you are trying to post the file using ajax, but dear it is not possible to do so unless you open an iframe as a hidden field and then try to post the form inside that.

But there are options for posting the data using ajax you can followup following links

Look at http://www.uploadify.com/ or something like http://www.swfupload.org/

And to find exact code please refer to this link http://stackoverflow.com/questions/6395053/using-jquery-form-plugin-asp-net-mvc-3[^]

Posted 25-May-12 19:55pm

govind giri

Comments

Prasanna Kumari 26-May-12 2:36am

using this process when am trying to pass the controller doesnt take any file the file is showing null and it showws arguement out of range exception .When i change the value to -1 also it is not taking.Any solution

govind giri 26-May-12 2:55am

You can find the code and examples here:
http://stackoverflow.com/questions/5272619/how-do-i-perform-a-ajax-jquery-upload-of-an-image-in-asp-net-mvc

Prasanna Kumari 26-May-12 5:18am

any solutions are there to store to database

Prasanna Kumari 26-May-12 5:31am

i want the index code to correctly transfer the file i tried many ways of transfering the file but it is not getting transfered.....