Input标签输入完成改变头像

很多时候都需要完成输入一个字段然后就有图片出来，这个类似于qq登录，当你输入完qq之后他就会显示你的头像出来。
这里我直接用一个input与img标签来实现这个功能。
一开始我给这个img标签设置了一张默认的图片

<img src="~/Content/images/auth-bg.jpg" width="150" height="150" 
style="border-radius:50%;" id="IMG" />

然后再写员工Input标签出来，在这里可以看出我的Input标签就是输入账号的标签。

<input type="text" name="UserNuber" id="UserNuber" class="form-control" placeholder="用户名" value=""/>

有了这两个之后就开始写JS代码，首先就是获取到这个Input标签

 var UserNuber = $("#UserNuber").val();

获取到了之后就判断他这个账号的数值范围，像QQ就是从100000开始的，但是我的是英文数字混合账号的，我只需要判断他这个用户账号的长度大于或者等于5就可以了。

if (UserNuber.length >= 5){}

如果他大于或者等于5那就把这个账号提交到控制去查询他这个账号是否有头像
这里我用的是post提交方法
传输的值是这个获取到的input标签的值

$.post("Selectimg", 
{ UserNuber: UserNuber }, function (src) {
                })

这里就直接提交这个账号去了控制器然后控制器来接收这个值，这里我是直接用的字符串来接收的

public ActionResult Selectimg(string UserNuber)

这里先用try捕获一下错误，如果错误就把这个错误改成默认图片传回去补修改头像

catch (Exception)
            {
       return Json("/Content/images/auth-bg.jpg", JsonRequestBehavior.AllowGet);
            }

这个try里面就开始写查询用用户账号去数据库查询出这个图片

Var img = (from tbUser in myModels.PW_User
                           where tbUser.UserNuber == UserNuber
                           select tbUser.Img).Single();

由于查询出来的这个img在数据库里面是以二进制数据的存在，拿出来就需要把他转为文件模式

byte[] Img = img;

然后以图片文件传回到页面

			return File(Img, @"images/jpg");

传回页面页面接收到了之后在设置这个HTML的Img标签的Src就可以了

function selectimg() {
            var UserNuber = $("#UserNuber").val();
            if (UserNuber.length >= 5) {
                $.post("Selectimg", { UserNuber: UserNuber }, function (src) {
                    $("#IMG").attr("src", src)
                })
            	} else {
             	   var src = "/Content/images/auth-bg.jpg";
               	 $("#IMG").attr("src", src);
            		}
       	 }

之后把这个function用在Input标签的改变事件里面就可以了，如果标签里面输入文字就可以改变然后调用这个方法

<input type="text" name="UserNuber" id="UserNuber" class="form-control" 
placeholder="用户名" value="" onchange=" selectimg() " />

Input标签输入完成改变头像

猜你喜欢