显示已上传图片的缩略图-MVC4

Question

I am working on an application in MVC4 C#

I have a Details page where a button "Upload Photo" is present. On click of the button , a pop up page opens (via Jquery) where I can upload&crop pics. Once cropped , I need to click "Confirm Pic" button present in the pop-up page. On click of "Confirm Pic", this pop up should get closed and the thumbnail of the cropped pic needs to be displayed on the parent page ie Details screen.

Issue: When I click "Confirm Pic" button, form post occurs on the parent page, due to which parent page is also getting refreshed , as a result I am losing all th unsaved data on the parent page

Currently I am out of ideas :( :( Any ideas are appreciated..

Answer 1

On click of the button, instead of opening a popup page, you should display the form in a modal . Then when you upload your cropped image, you should do it using ajax.

EDIT

 $("#form").on("submit", function(e) { e.preventDefault(); $.ajax({ url: 'urlHere', type: 'POST', data: new FormData(this), processData: false, contentType: false }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"> <input type="file" name="myFile"> <input type="submit"> </form> 

You should know that it will not work in IE before version 10.