我用的是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];
}

.net mvc 上传头像的更多相关文章

  1. asp.net mvc上传头像加剪裁功能

    原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jqu ...

  2. mvc上传头像加剪裁功能

    asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...

  3. asp.net mvc上传头像加剪裁功能介绍

    正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...

  4. swift上传头像

    很久没有写博客了,今天特地写了这个,也是一边仿照别人写的demo,注释部分都是需要的.需要的同学可以参考一下. @IBAction func headImageBtnPage(){  //上传头像 / ...

  5. Spring MVC上传文件

    Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...

  6. html5 上传头像的裁剪

    本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全: 下图为裁剪后的效果: html部分: <!DOCTYPE html& ...

  7. 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

  8. MVC上传文件

    ASP.NET MVC上传文件是必段撑握的知识.加强训练才是.以前Insus.NET曾使用第三方MyAjaxForm.js :http://www.cnblogs.com/insus/p/378548 ...

  9. Jcrop+uploadify+php实现上传头像预览裁剪

    最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...

随机推荐

  1. java基础语法-char数据类型

    1.java中的char描述了UTF-16中的一个代码单元,因此对于基本的多语言层面可以随意的用char表示 ;//int值只能在0到65535即0000到FFFF 对于其他16个代码级别(两个代码单 ...

  2. C#WFM关于PICBOX 再DIP界面放大125%后,图片显示不完整

    外观哪里选中Zoom,就好

  3. 转--Python re模块 验证11位手机号

      一.常用正则表达式符号和语法:   '.' 匹配所有字符串,除\n以外 ‘-’ 表示范围[0-9] '*' 匹配前面的子表达式零次或多次.要匹配 * 字符,请使用 \*. '+' 匹配前面的子表达 ...

  4. vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives

    vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives Vue 2.2.0+的版本里,当在组件 ...

  5. Winform Chart 控件读取datatable后显示图表

    private void Button2_Click(object sender, EventArgs e) { DataTable table = new DataTable(); this.cha ...

  6. hiho一下 第207周

    题目1 : The Lastest Time 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 What is latest time you can make with ...

  7. [十二省联考2019]骗分过样例 luoguP5285 loj#3050

    不解释(因为蒟蒻太弱了,肝了一晚受不了了...现在省选退役,这有可能就是我做的最后一题了... #include<bits/stdc++.h> using namespace std; # ...

  8. Guitar Por如何演奏刮弦

    每当我们听到吉他现场演出的时候,看到吉他手在激烈的刮弦时,都觉得很酷,非常有感染力.刮弦在我们弹吉他或编曲时,会经常用到,虽然时间很短,但会为你加分不少. 那么我们应该如何演奏刮弦呢,我们先用E5和弦 ...

  9. Python脚本备份

    #!/usr/bin/python3 # -*- coding:utf- -*- # 保证源程序可以输入汉字 print bool([]) # 任何为零的数字或空集(空列表.空元组和空字典等)均为Fa ...

  10. 【ActiveReports 大数据分析报告】用数据分析的手段告诉你,复联4有多火爆?

    消失的人们会回来吗,奇异博士所说的1400万分之一可能性究竟是什么,还会有谁逝去? 4月24日零时,随着万众期待的<复仇者联盟4>(以下简称<复联4>)正式上映,一切谜底都将揭 ...