.net mvc 上传头像

我用的是mvc5  开发环境vs2017 【仅供参考】

【视图代码】

<div >
        <img src="@path" alt="@att.Count" id="pic" style="width:80px;height:80px;border-radius:50%;" />
        <input id="upload" name="file" accept="image/*" type="file" style="display: none">    
</div>

 

【Ajax代码】

<script>
    $(function () {
        $("#pic").click(function () {
            $("#upload").click(); //隐藏了input:file样式后,点击头像就可以本地上传
            $("#upload").on("change", function () {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径,该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl); //将图片路径存入src中,显示出图片
                    upimg();
                }
            });
        });
    });

    //建立一?可存取到?file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //上传头像到服务器
    function upimg() {
        var pic = $('#upload')[0].files[0];
        var file = new FormData();
        file.append('image', pic);
        $.ajax({
            url: "/Staff/Upload?ID=@entityId",
            type: "post",
            data: {file: file },
            cache: true,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
                console.log("ok")
                var res = data;
                $("#resimg").append("<img src='/" + res + "'>")
            }
        });
    }
</script>

【控制器代码】

 /// <summary>
        /// 上传文件
        /// </summary>
        /// <param name="ID">实体对象id</param>
        /// <param name="fileBase">文件对象</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Upload(Int32 ID)
        {
            HttpPostedFileBase file = Request.Files[0];
        }

 

转载于:https://www.cnblogs.com/shichina/p/10701666.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 .NET MVC 中实现上传头像功能,可以按照以下步骤进行: 1. 在 View 中添加一个表单,用于上传头像文件: ``` @using (Html.BeginForm("UploadAvatar", "User", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="avatarFile" /> <input type="submit" value="上传头像" /> } ``` 2. 在 Controller 中添加一个 Action,用于处理上传头像文件的逻辑: ``` [HttpPost] public ActionResult UploadAvatar(HttpPostedFileBase avatarFile) { if (avatarFile != null && avatarFile.ContentLength > 0) { var fileName = Path.GetFileName(avatarFile.FileName); var path = Path.Combine(Server.MapPath("~/Content/Avatars"), fileName); avatarFile.SaveAs(path); } return RedirectToAction("Index"); } ``` 3. 在上述代码中,`HttpPostedFileBase` 类型的 `avatarFile` 参数表示上传的文件,`Path.GetFileName` 和 `Path.Combine` 方法用于获取文件名和保存路径,`Server.MapPath` 方法用于将相对路径转换为绝对路径,`avatarFile.SaveAs` 方法用于保存文件。 4. 在 `SaveAs` 方法执行成功后,文件就会被保存在 `~/Content/Avatars` 目录下(如果该目录不存在,需要先手动创建)。可以在 View 中使用以下代码来显示上传头像: ``` @if (System.IO.File.Exists(Server.MapPath("~/Content/Avatars/avatar.jpg"))) { <img src="@Url.Content("~/Content/Avatars/avatar.jpg")" /> } ``` 上述代码中,`System.IO.File.Exists` 方法用于判断头像文件是否存在,`Url.Content` 方法用于获取头像文件的 URL。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值