bremen_short_url/BackEnd/user-profile-settings.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/BackEnd/MasterPage.master" AutoEventWireup="true" CodeFile="user-profile-settings.aspx.cs" Inherits="BackEnd_user_profile_settings" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script>
        $(document).ready(function () {
            $('#user_pic_image').slim({
                ratio: '1:1',
                minSize: {
                    width: 60,
                    height: 60,
                },
                forceSize: {
                    width: 200,
                    height: 200,
                },
                download: true,
                label: 'Click or Drop your photo here',
                maxFileSize: 10,
                forceType: 'png',
                meta: {
                    picType: 'user_pic_image',
                    picChange: 'N'
                }
            });

            $('#user_pic_image').slim('load', $('[data-name=user_pic]').attr("img_src"));

            $('#updateBtn').click(function () {
                var errmsg = "";

                var emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;

                if ($('[data-role=input_email]').val().search(emailRule) == -1) {
                    errmsg = "請輸入正確的Email!";
                } 

                if ($('[data-role=input_pass]').val() != $('[data-role=input_pass2]').val()) {
                    errmsg = "請確認密碼是否輸入正確!";
                }

                if (!!$('[data-role=input_pass]').val()) {
                    if ($('[data-role=input_pass]').val().length > 0 && $('[data-role=input_pass]').val().length < 6) {
                        errmsg = "密碼須超過六個字元!";
                    }
                }
              

                var jsondata = $('#user_pic_image').slim('data');
                var data = $('#user_pic_image').slim('dataBase64');

                var picSplit = $('[data-name=user_pic]').attr("img_src").split("/");
                var oldname = picSplit[picSplit.length - 1];
                var pass = $('[data-role=input_pass]').val();

            
                if (jsondata[0].input.name != oldname) {
                    $('#user_pic_image').slim('data')[0].meta.picChange = "Y";
                }

                if (errmsg != "") {
                    alert(errmsg);
                    return;
                }

                var input_email = $('[data-role=input_email]').val();
                var formData = {
                    input_email: input_email,
                    pic_data: JSON.stringify(data),
                    pass: pass
                }

                $.ajax({
                    url: "api/user-profile.ashx",
                    type: "POST",
                    data: formData,
                    success: function (data, textStatus, jqXHR) {
                        if (data.ret == 'yes') {
                            alert('儲存完成');
                        } else {
                            alert('儲存失敗，原因為' + data.message);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('系統發生錯誤!');
                    }
                });
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <!-- .page 主畫面-->
    <div class="page">

        <div>
            <div class="page">
                <div class="page-inner">
                    <!-- .card -->
                    <div class="card card-fluid">
                        <h6 class="card-header">個人資料 </h6>
                        <!-- .card-body -->
                        <div class="card-body">
                            <!-- .media -->
                            <div class="media mb-3">
                                <!-- avatar -->

                                <input type="file" id="user_pic_image" name="slim[]" required accept="image/jpeg, image/png" data-rule="user_pic_image" class="user-avatar-slim user-avatar-slim-xl" style="visibility: hidden;" />
                                <div style="visibility: hidden;" id="user_pic" runat="server" img_src="" data-name="user_pic" />


                                <!-- /avatar -->
                                <!-- .media-body -->
                                <div class="media-body pl-3">
                                    <h3 class="card-title" id="user_name" runat="server">Public avatar </h3>
                                    <h6 class="card-subtitle text-muted">點擊照片更換頭像. </h6>
                                    <p class="card-text">
                                        <small>JPG or PNG 400x400, &lt; 2 MB.</small>
                                    </p>
                                    <!-- The avatar upload progress bar -->
                                    <div id="progress-avatar" class="progress progress-xs fade">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <!-- /avatar upload progress bar -->
                                </div>
                                <!-- /.media-body -->
                            </div>
                            <!-- /.media -->
                            <!-- form row -->
                            <div class="form-group">
                                <!-- form column -->
                                <label for="input_name">姓名</label>
                                <!-- /form column -->
                                <!-- form column -->

                                <input type="text" class="form-control" id="input_name" value="CreativeDivision" runat="server" readonly="readonly" />

                                <!-- /form column -->
                            </div>
                            <!-- /form row -->
                            <!-- form row -->
                            <div class="form-group">
                                <!-- form column -->
                                <label for="input_email">Email</label>
                                <!-- /form column -->
                                <!-- form column -->

                                <input type="text" class="form-control" id="input_email" data-role="input_email" value="" runat="server" />

                                <!-- /form column -->
                            </div>
                            <!-- /form row -->
                            <!-- form row -->
                            <div class="form-group" id="pass1" runat="server">
                                <!-- form column -->
                                <label for="input_pass">密碼</label>
                                <!-- /form column -->
                                <!-- form column -->

                                <input type="password" class="form-control" id="input_pass" data-role="input_pass" value="" runat="server" />
                                <p>需要修改密碼時才需填入</p>
                                <!-- /form column -->
                            </div>
                            <!-- /form row -->
                            <!-- form row -->
                            <div class="form-group" id="pass2" runat="server">
                                <!-- form column -->
                                <label for="input_pass2">密碼再確認</label>
                                <!-- /form column -->
                                <!-- form column -->

                                <input type="password" class="form-control" id="input_pass2" data-role="input_pass2" value="" runat="server" />

                                <!-- /form column -->
                            </div>
                            <!-- /form row -->
                            <hr>
                            <!-- .form-actions -->
                            <div class="form-actions">
                                <button type="button" class="btn btn-primary ml-auto" id="updateBtn">儲存變更</button>
                            </div>
                            <!-- /.form-actions -->
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </div>

    </div>
    <!-- /.page 主畫面-->
</asp:Content>