2

I'd like my users to be able to upload a picture to my server and without having them switch pages have that image bounced back to a div on that site once the upload has finished.

This is for a "Change your profile picture" page. I need to get the picture back so I can invoke the jCrop jquery library on it so they can crop the picture to their liking.

Here's what I have so far:

@{
    ViewBag.Title = "Profile Picture";
}

<h1>Please choose your new profile picture.</h1>

<input type="file" name="file" />
<input type="submit" value="OK" />

If I put in the @using BeginForm the form is posted back and the page loads somewhere new. I don't want this behavior. How do I do this with AJAX without reloading?

Only Bolivian Here
  • 35,719
  • 63
  • 161
  • 257

1 Answers1

3

You can't submit a file via ajax unless your browser supports the file API. https://developer.mozilla.org/en/using_files_from_web_applications

You can create an iframe and use that to submit your image.

How can I upload files asynchronously?

Community
  • 1
  • 1
BNL
  • 7,085
  • 4
  • 27
  • 32