jquery - Changing and uploading Profile photo like facebook in Razor view MVC -


i want implement facebook-like changing profile picture option. not complicated, hover link on profile picture, clicking on ask browse image file, , on closing window perform upload action, without need of additional upload button.

my requirement:

enter image description here

current view of page

enter image description here

right 'change picture' button open browse file window, , 'upload' button performs form submit action, not professional. can manage additional 'upload' button want give 'change picture' option on image i've shown in first image. how can achieve this?

my view code

            <tr>                  <td style="padding-right:0px; padding-left:0px; padding-bottom:0px; padding-top:0px; border-radius:50%" align="center"><img src="~/employee/@viewbag.links" alt="display picture" align="middle" height=160 width=120></td>             </tr>              <tr>             @using (html.beginform("myaccount", "home", formmethod.post, new { enctype = "multipart/form-data" }))                                     {                                         <td align="center">                                             <input type="file" id="browse" name="file" style="display: none" accept=".jpg"/>                                             <input type="button" value="change picture" id="fakebrowse" onclick="handlebrowseclick();" name="file" /><br />                                             <input type="submit" name="upload" value="upload" />                                         </td>                                     }             </tr> 

please note: in view i'm using table structure not divs.


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -