【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像

纯代码不解释。

在CusotmerControllers中添加上传方法

/// <summary>
        /// ajax上传用户头像
        /// </summary>
        /// <param name="uploadedFile"></param>
        /// <returns></returns>
        [HttpPost]
        public string AjaxUploadAvatar(HttpPostedFileBase uploadedFile)
        {
            string message = string.Empty;
            var customer = _workContext.CurrentCustomer;
            try
            {
                var customerAvatar = _pictureService.GetPictureById(customer.GetAttribute<int>(SystemCustomerAttributeNames.AvatarPictureId));
                if ((uploadedFile != null) && (!String.IsNullOrEmpty(uploadedFile.FileName)))
                {
                    int avatarMaxSize = _customerSettings.AvatarMaximumSizeBytes;
                    if (uploadedFile.ContentLength > avatarMaxSize)
                    {
                        message = string.Format(_localizationService.GetResource("Account.Avatar.MaximumUploadedFileSize"), avatarMaxSize);

                        return message;
                    }

                    byte[] customerPictureBinary = uploadedFile.GetPictureBits();
                    if (customerAvatar != null)
                        customerAvatar = _pictureService.UpdatePicture(customerAvatar.Id, customerPictureBinary, uploadedFile.ContentType, null, true);
                    else
                        customerAvatar = _pictureService.InsertPicture(customerPictureBinary, uploadedFile.ContentType, null, true);
                }

                int customerAvatarId = 0;
                if (customerAvatar != null)
                    customerAvatarId = customerAvatar.Id;

                _genericAttributeService.SaveAttribute(customer, SystemCustomerAttributeNames.AvatarPictureId, customerAvatarId);
                message = _pictureService.GetPictureUrl(
                        customer.GetAttribute<int>(SystemCustomerAttributeNames.AvatarPictureId),
                        _mediaSettings.AvatarPictureSize,
                        false);
                return "1|" + message;

            }
            catch (Exception exc)
            {
                message = exc.Message;
                return message;
            }
        }

View代码:Avatar.cshtml

<script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script>
@using (Html.BeginForm("AjaxUploadAvatar", "Customer", FormMethod.Post, new { enctype = "multipart/form-data", id = "formUploadImg" }))
{
    <div class="theme-popover-mask"></div>
    <div class="theme-popover">
        <div class="message-error">
            @Html.ValidationSummary(true)
        </div>
        <div class="theme-poptit">
            <a href="javascript:;" title="关闭" class="close">×</a>
            <h3>修改您的头像</h3>
        </div>
        <div class="theme-popbod dform">
            <div class="upload_left">
                @if (!String.IsNullOrEmpty(Model.AvatarUrl))
                {
                    <img src="@(Model.AvatarUrl)" alt="avatar" />
                }<p>当前头像</p>
            </div>
            <div class="upload_right">
                <h3>请选择您电脑上的图片：</h3>
                <input name="uploadedFile" id="uploadedFile" type="file" />
                <input type="submit" id="btnUploadImg" name="upload-avatar" class="button-1 upload-avatar-button" value="@T("Common.Upload")" />
                @if (!String.IsNullOrEmpty(Model.AvatarUrl))
                {
                    <input type="submit" name="remove-avatar" class="button-2 remove-avatar-button" value="@T("Account.Avatar.RemoveAvatar")" />
                }
                <div id="progress" style="display: none">
                    <div id="bar">图片正在上传请稍等.....</div>
                </div>
                <br />
                <div id="message"></div>
                <input type="hidden" value="0" id="hidIsUpLoadimg" />
                <p>@T("Account.Avatar.UploadRules")</p>
            </div>
        </div>
    </div>
}
<script type="text/javascript">
    $(document).ready(function ($) {
        $('.user_infor img').click(function () {
            popupCon();
        });
        $('.theme-poptit .close').click(function () {
            popupBtn();
        });

        $(document).ready(function () {
            var options = {
                beforeSend: function () {
                    $("#progress").show();
                },
                success: function () {
                    $("#progress").hide();
                },
                complete: function (response) {
                    if (response.responseText.split('|')[0] == "1") {
                        $("#hidIsUpLoadimg").val(response.responseText);
                        $("#message").html("<font color='green'>图片上传成功,请刷新当前页面.</font>");
                    }
                },
                error: function () {
                    $("#message").html("<font color='red'>上传图片出错,请重新上传!</font>");
                }
            };
            $("#formUploadImg").ajaxForm(options);
        });
    });
</script>

其它的不多说了。在用NopCommerce的欢迎加群讨论。