根据性别上传个人资料照片

时间:2015-07-04 02:26:23

标签: javascript php html

我有一个带有两个单选按钮“男性”和“女性”的注册表单,我的注册表格工作正常,但我遇到的问题是根据用户性别选择上传个人资料图片。有关如何暗示这一点的任何建议? 这是表格

中的代码
<div align ="center">Gender: </div>
        </label> <br/>
        Male &nbsp;<input type="radio" name="gender" />&nbsp;&nbsp;&nbsp;
        Female &nbsp;<input type="radio" name="gender" />

2 个答案:

答案 0 :(得分:1)

如果您的目标是让他们检查性别框,然后在他们选择性别后在他们的个人资料页面上显示相应的头像,那么您需要在服务器上将两个图像存储在公共目录中,例如{{ 1}}和site.com/images/male.png。加载配置文件时,您可以使用以下选项来选择相应的图片。

site.com/images/female.png

答案 1 :(得分:0)

以下是参考fiddle,根据您的要求修改代码。

&#13;
&#13;
var male = new Image();
male.src = "https://slm-assets1.secondlife.com/assets/7232381/lightbox/byron1mainwide.jpg?1361771089";

var female = new Image();

female.src = "http://1.bp.blogspot.com/-NgUohxAEzYQ/UDKsBYpDRmI/AAAAAAAAAcs/_anEWtBS7Ms/s1600/Female%2BVulcan%2BAvatar%2BPicture.jpg";

$("input[name='gender']").change(function() {

  if ($("input[type='radio']:checked").val() == "male") {
    $("#profile").html(male)
  } else {
    $("#profile").html(female)
  }
})
&#13;
#profile {
  height: 100px;
  width: 100px;
  border: 1px solid black
}
#profile img {
  height: 100px;
  width: 100px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">Gender:</div>
</label>
<br/>Male &nbsp;
<input type="radio" name="gender" value="male" />&nbsp;&nbsp;&nbsp; Female &nbsp;
<input type="radio" name="gender" value="female" />

<div id="profile"></div>
&#13;
&#13;
&#13;

更新,更改img代码:

在单选按钮上创建change事件,检查是否选中了男性或女性,并相应地更改图像src。

&#13;
&#13;
var imageTag = document.getElementById('profile')

$("input[name='gender']").change(function() {

  if ($("input[type='radio']:checked").val() == "male") {
    imageTag.src = "https://slm-assets1.secondlife.com/assets/7232381/lightbox/byron1mainwide.jpg?1361771089"
  } else {
    imageTag.src = "http://1.bp.blogspot.com/-NgUohxAEzYQ/UDKsBYpDRmI/AAAAAAAAAcs/_anEWtBS7Ms/s1600/Female%2BVulcan%2BAvatar%2BPicture.jpg"
  }
})
&#13;
#profile {
  height: 100px;
  width: 100px;
  border: 1px solid black
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">Gender:</div>
</label>
<br/>Male &nbsp;
<input type="radio" name="gender" value="male" />&nbsp;&nbsp;&nbsp; Female &nbsp;
<input type="radio" name="gender" value="female" />

<img id="profile"></img>
&#13;
&#13;
&#13;