Home Changing and uploading Profile photo like facebook in Razor view MVC
Reply: 0

Changing and uploading Profile photo like facebook in Razor view MVC

Sameep Baxi
1#
Sameep Baxi Published in 2017-09-11 07:06:40Z

I want to implement facebook-like changing profile picture option. Not too complicated, but just a hover link on the profile picture, clicking on which will ask to browse an image file, and on closing the window will perform upload action, without the need of an additional upload button.

My requirement:

Current view of my page

Right now the 'Change Picture' button open a browse for file window, and 'Upload' button performs a form submit action, which does not look very professional. I can manage with an additional 'Upload' button but I want to give 'Change Picture' option on the image itself as I've shown in the first image. How can I 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 my view I'm using table structure not divs.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.299173 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO