基于AdminLTE的jquery头像更新

最近在写实验室管理系统中的个人信息模块,上边要求实现更改头像功能。百度了一大堆,无实用的。(要么各种币)

本文介绍的只是实现了简单功能(毕竟现在初学阶段)

需要引用文件,顺序也不能错。

<script src="~/JS/bootstrap/js/jquery.min.js"></script>

<script src="~/JS/bootstrap/js/bootstrap.min.js"></script>

<script src="~/JS/jquery.ui.widget.js"></script>

<script src="~/JS/jquery.iframe-transport.js"></script>

<script src="~/JS/jquery.fileupload.js"></script>

文件链接:http://pan.baidu.com/s/1skH0xnZ

<div class="widget-user-image">
            <img class="img-circle"  >
        </div>
    <input type="file"  multiple>
    <button class=" btn btn-primary" >修改头像</button>

  jQuery

<script type="text/javascript">

    $('#fileupload').fileupload({

        url: "/Info/img",
        Type: "POST",
        dataType: 'json',
        autoUpload: true,
        acceptFileTypes: "/(\.|\/)(gif|jpe?g|png|xlsx)$/i",
        add: function (e, data) {
            $("#Start").click(function () {
                data.submit();
            })
            alert("已选择文件,可以更新头像!");
        },
        success: function (response, status) {
            var obj = JSON.parse(response);
            var imgPath = "../.." + obj["filePath"];
            //$("#imglist").append('<li><img src="' + imgPath + '" /> </li>');
            $('#appear').attr("src",imgPath);

        },
        done: function (e, data) {
            alert("update finish");
        },
        error: function (error) {
            alert("error");
        },
    });
</script>

  C#方法

 public JsonResult img(HttpPostedFileBase files)
        {
            try
            {
                string localPath = "/images"; 
                string path = Server.MapPath("~" + localPath);
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                //TimeSpan ts = DateTime.Now - TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1));
                //string fileName = (long)ts.TotalMilliseconds + Path.GetExtension(files.FileName);
                string fileName = files.FileName;
                files.SaveAs(path + "/" + fileName);
                return Json("{\"filePath\":\"" + localPath + "/" + fileName + "\",\"sourePath\":\"" + files.FileName + "\"}");

            }
            catch (Exception ex)
            {
                return null;
            }
        }

可以实现简单头像更新。至此