【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的欢迎加群讨论。

上一篇:ASP.NET MVC中使用表单上传文件时的注意事项


下一篇:kubernetes rabbitmq 集群安装配置