Onclick更改个人资料图片

本文介绍了Onclick更改个人资料图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的个人资料照片显示在我的页面上。现在我希望用户能够通过点击它来更改他们的默认个人资料图片。我怎么能在这里实现这个是我的代码 <

< a class = media-left pr-n href = > < img class = media -object img-resposnive src = @ Model.ImageStore.GetPublicImageUrl（） alt = Generic占位符图像 width =' 88' height =' 88' > < / a >

我的尝试： < img class =media-object img-resposnivesrc =@ Model.ImageStore.GetPublicImageUrl（）alt = Generic占位符图片width ='88'height = '88'>

解决方 你将需要用于改变轮廓图象代码的逻辑。我们的想法是连接JavaScript点击事件，然后让用户选择一张图片。然后，您可以发出AJAX请求以将上载的文件存储到您的服务器以供将来使用。最后，将图像的src设置为新上传的图像。 我相信有很多示例演示如何在jQuery中执行此操作。它要么使用插件，要么滚动自己的代码进行上传。只需在谷歌找到它们。

使用jquery选择元素并创建一个onclick事件。最简单的方法是使用ID。 在img标签中添加一个idprofile_pic。 然后在你的javascript文件中。

（ ' ＃profile_pic'）。on（'' 点击'，changePic）;

然后有一个名为changePic的函数来执行更改逻辑，即加载带文件上传输入的对话框等

i have a profile picture which appear on my page. Now i want user to be able to change their default profile picture by click on it. How can i achive this this here is my code <

<a class="media-left pr-n" href=""> <img class="media-object img-resposnive" src="@Model.ImageStore.GetPublicImageUrl()" alt="Generic placeholder image" width='88' height='88'> </a>

What I have tried: <img class="media-object img-resposnive" src="@Model.ImageStore.GetPublicImageUrl()" alt="Generic placeholder image" width='88' height='88'>

解决方案

You would need to code the logic for changing the profile picture. The idea is to wireup a JavaScript click event and then have the user choose a picture. You can then issue an AJAX request to store the uploaded file to your server for future use. And finally, set the src of your image to the new uploaded image. I believe there are tons of examples that demonstrate how to do it in jQuery. It's either using a plugin or rolling your own code to do the uploading. Just find them at google.

use jquery to select the element and create a onclick event. The easiest way to do this is to use an ID. add an id to the img tag of say "profile_pic". then in your javascript file do.

('#profile_pic').on('click', changePic);

then have a function called changePic to do the changing logic, i.e load up a dialog with a file upload input etc.