【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像
2014-03-27 10:19
260 查看
纯代码不解释。
在CusotmerControllers中添加上传方法
View代码:Avatar.cshtml
其它的不多说了。在用NopCommerce的欢迎加群讨论。
在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]jquery.form.js无刷新上传
- ASP.NET MVC 使用jquery.form.js 异步上传 在IE下返回值被变为下载的解决办法
- ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(2)
- ASP.NET MVC 利用ActionFilterAttribute来判断用户是否登陆等等
- ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender
- dhl:ASP.NET MVC + Jquery实现Ajax下拉框数据2或3级联动(+用户控件)
- ASP.NET MVC 重点教程一周年版 第十一回 母版页、用户自定义控件及文件上传
- 使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(2)
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)
- 关于jQuery在Asp.Net Mvc 框架下Ajax文件上传的实现
- ASP.Net MVC3 图片上传详解(form.js,bootstrap)
- asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)
- C# MVC 用户登录状态判断 【C#】list 去重(转载) js 日期格式转换(转载) C#日期转换(转载) Nullable<System.DateTime>日期格式转换 (转载) Asp.Net MVC中Action跳转(转载)
- 在asp.net利用jquery.MultiFile实现多文件上传(转载)
- C#结合js 上传文件和删除文件(技术点有:asp.net mvc ,nhibernate,ajax等)
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(3)
- 使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(1)
- asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
- asp.net mvc上传头像加剪裁功能