.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];
}
.net mvc 上传头像的更多相关文章
- asp.net mvc上传头像加剪裁功能
原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jqu ...
- mvc上传头像加剪裁功能
asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...
- asp.net mvc上传头像加剪裁功能介绍
正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...
- swift上传头像
很久没有写博客了,今天特地写了这个,也是一边仿照别人写的demo,注释部分都是需要的.需要的同学可以参考一下. @IBAction func headImageBtnPage(){ //上传头像 / ...
- Spring MVC上传文件
Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...
- html5 上传头像的裁剪
本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全: 下图为裁剪后的效果: html部分: <!DOCTYPE html& ...
- 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)
现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...
- MVC上传文件
ASP.NET MVC上传文件是必段撑握的知识.加强训练才是.以前Insus.NET曾使用第三方MyAjaxForm.js :http://www.cnblogs.com/insus/p/378548 ...
- Jcrop+uploadify+php实现上传头像预览裁剪
最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...
随机推荐
- WebDriver实现网页自动化测试(以python为例说明,ruby用法类似)
什么是Webdriver? Selenium 2,又名 WebDriver,它的主要新功能是集成了 Selenium 1.0 以及 WebDriver(WebDriver 曾经是 Selenium 的 ...
- 7zip 18.3性能测试
配置 7zip 18.3 bate3 的性能大幅提升,进行一点简单测试 配置为 E3 1230v2 3.5G 4核心/8线程 12G内存 均为8线程测试 压缩解压一个1.5G的虚拟机磁盘镜像 测试 再 ...
- Hive中常用的参数配置
-- 查看当前环境参数配置set -v;-- 重置配置为默认值reset; -- 调整map数-- input的文件大小,集群设置的文件块大小,hive中通过set dfs.block.size;命令 ...
- jQuery的deferred对象使用详解
转自: https://www.cnblogs.com/PengLee/p/5657101.html jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本.每个版本都会引入一些新功能. ...
- Docker 构建 RabbitMQ 集群
刚开始,关于RabbitMQ集群的搭建,我找到了这篇文章:Docker 安装 RabbitMQ 集群 从而找到了第三方的RabbitMQ集群容器 rabbitmq-server 但是这个容器只有3.6 ...
- semaphore demo !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
import 'dart:async'; import 'package:semaphore/semaphore.dart'; import 'dart:io'; import 'dart:conve ...
- C#线程同步(2)- 临界区&Monitor
文章原始出处 http://xxinside.blogbus.com/logs/46740731.html 预备知识:C#线程同步(1)- 临界区&Lock 监视器(Monitor)的概念 可 ...
- redhat7 配置使用centos的yum源
新安装了redhat7.安装后,登录系统,使用yum update 更新系统.提示: This system is not registered to Red Hat Subscription Man ...
- (void) (&_min1 == &_min2);【转】
本文转载自:https://blog.csdn.net/xiaofeng_yan/article/details/5248693 偶然在<./linux/include/linux/kernel ...
- Page.Cache
https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.page.cache?view=netframework-4.8 Gets the ...