修改头像1

就是在做自己的小项目的时候嘛，想在项目中加一点项目书规定要做的功能之外的动画和功能。但要老师讲过的，自己会的。所以就弄了这个修改头像的功能，本人呢是新手，或许有点小瑕疵，看看就行。

页面代码：

<div class="nav-profile-img">
            <img src="~/Content/images/faces/face1.jpg" alt="image" id="HeadImage" />
</div>
//给a标签一个点击事件，点击标签的时候提出修改头像模态框。
<a class="dropdown-item" onclick="Image()">
             <i class="mdi mdi-cached mr-2 text-success"></i>
                                修改头像
</a>

给个模态框：

  @*头像模态框*@
    <div class="modal fade" id="modalHeadImage" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title col-auto" id="exampleModalCenterTitle">head portrait</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form id="formHeadImage" class="form-horizontal">
                        <div class="form-group form-row justify-content-center">
                            <div class="col-auto">

                                <img src="" alt="" id="IsImgStudentPicture" class="border" ondblclick="showImageFile('IstudentPicture')" />
                                <input type="file" name="fileStudentImage" id="IstudentPicture" hidden accept="image/*" onchange="loadImgToEimg('IstudentPicture')" />
                               
                                <p  class="text-danger col-auto">双击选择图片<i class="mdi mdi-arrow-up"></i></p>
                            </div>
                        </div>
                        <div class="form-group form-row justify-content-center">
                            <div class="col-auto">
                                <button type="button" class="btn btn-primary mr-2" onclick="savaInsert()">保存</button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

JS代码：
//这个是回填头像

   $("#HeadImage").attr("src", "/Main/HeadImage");//路径是控制器回填头像

//在点击a标签的时候会调用这个函数。

function Image() {
            //重置表单
            $('#formHeadImage input[type="reset"]').click();
            ////回填数据
            $("#IsImgStudentPicture").attr("src", "/Main/HeadImage");
            //弹出模态框
            $("#modalHeadImage").modal('show');
        }

双击模态框中的img打开图片文件选择

   function showImageFile(imageFileId) {
                $("#" + imageFileId).click();
            }

//选中图片，然后就是正则表达式匹配过滤图片

  //匹配图片正则表达式
        var imgReader = new FileReader();
        //图片文件 正则表达式过滤
        regexImageFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
        //文件读取 onload事件
        imgReader.onload = function (evt) {
            //绑定修改图片
            $("#IsImgStudentPicture").attr("src", evt.target.result);
        }
        //将选择的图片显示到 img元素
        function loadImgToEimg(imageFileId) {
            //选取选择图片
            var imgfFile = $("#" + imageFileId).get(0).files[0];
            //加载image标签中
            if (!regexImageFilter.test(imgfFile.type)) {
                //alert("选择的不是一个有效的图片文件");
                alert('选择的不是一个有效的图片文件', { icon: 0 });
            }
            imgReader.readAsDataURL(imgfFile);
        }

点击模态框的保存修改按钮，执行下面代码。

 function savaInsert() {
            var fd = new FormData();
            fd.append("fileStudentImage", $('#formHeadImage input[name="fileStudentImage"]').prop('files')[0]);//文件添加到FormData
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", function (returnJson) {
                console.log(returnJson)
                layer.close(layerIndex);//关闭加载层
                if (event.currentTarget.responseText == "true") {
                    alert("保存成功");
                    //关闭模态框
                    $("#modalHeadImage").modal("hide");
                    window.history.go(0);
                }
                else {
                    layer.alert("保存失败", { icon: 2 });
                }
            }, false);
            xhr.addEventListener("error", function (event) {
                layer.close(layerIndex);//关闭加载层
                layer.alert("保存失败", { icon: 2 });
            }, false);
            xhr.open("POST", "/Main/UpdateHeadImage");//通过POST，提交数据到控制器
            //打开加载层
            layerIndex = layer.msg('保存中...', {
                icon: 16,
                time: 0,
                shade: 0.3
            });
            xhr.send(fd);
        };