使用cropper插件进行图片裁剪 并上传
cropper插件的使用和 github地址:
我参考的中文文档:
cropper+mvc的代码
自己东拼西凑的就做出来了
js和前台的代码 (完全参考的上边中文文档里的代码)
使用插件裁剪完成图片后 图片的格式是blob类型的 类似这样 (blob:http://localhost:......),
使用的样式是模态框版,就是在模态框中裁剪完图片,然后点击提交会先 “ 显示 ” 裁剪后的图片,再点击我页面中的确定才会向后台发送ajax请求。
图片裁剪后所执行的方法:
$('#photo').cropper('getCroppedCanvas', {
width: 300,
height: 300
}).toBlob(function (blob) {
that.obj = blob;//that.obj是我自己定义的变量。ajax上传时要用
$('#user-photo').attr('src', URL.createObjectURL(blob));
$('#changeModal').modal('hide');
})
这是ajax上传的代码:
var formData = new FormData();//使用formdata进行传输
formData.append("file", that.obj);//that.obj是blob类型
formData.append("data", that.formItem);//我的表单,用不到可以忽略
$.ajax({
url: '/account/sever', //要上传的地址
type: 'post',
data: formData,
contentType: false,//1.必须加上这两个
processData: false,//2.否则请求不了后台方法
success: function (url) {//返回值
if (url != "") {
$('#user-photo').attr('src', url);
$('#changeModal').modal('hide');
}
}
});
后台代码:
DocumentDirectory 是我自己定义的文件位置
private const string DocumentDirectory = "/upload/account"; 这是文件路径 [HttpPost]
public string Sever()
{
var files = Request.Files;// 从前台获取文件
var url="";
if (files.Count>0)
{
if (files.Count == 0) throw new UserFriendlyException("未选择文件");
var absolutePath = Request.MapPath(DocumentDirectory);
if (!Directory.Exists(absolutePath)) Directory.CreateDirectory(absolutePath); var attachment = files[0];
var fileName = Guid.NewGuid().ToString("N") + Path.GetExtension(attachment.FileName)+".jpg";//上传文件后没有扩展名,这是我自己加的。
var filePath = Path.Combine(absolutePath, fileName);
attachment.SaveAs(filePath);
url = DocumentDirectory + "/" + fileName;//因为为要返回的url是图片的相对路径,所以这个url是自己拼出来的
}
return url;
}
本来ajax是放在裁剪完后的代码里的
var that = this;
$('#photo').cropper('getCroppedCanvas', {
width: 300,
height: 300
}).toBlob(function (blob) {
var formData = new FormData();
formData.append("file", blob);
formData.append("data", that.formItem);
$.ajax({
url: '/account/sever', //要上传的地址
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (url) {
if (url != "") {
$('#user-photo').attr('src', url);
$('#changeModal').modal('hide');
}
}
});
})
后来发现,我只要裁剪完图片他就直接将图片保存到服务器,就把它们分开了,只有点击提交时才会修改和保存图片。
使用cropper插件进行图片裁剪 并上传的更多相关文章
- struts2+jsp+jquery+Jcrop实现图片裁剪并上传
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...
- HTML5本地图片裁剪并上传
最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定 ...
- 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)
web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...
- C# winform截图、web Cropper图片剪切、上传
今天又来一弹,写了个小功能,windows 桌面截图,web剪切图片上传的功能. 废话不多说,直接上图: 1.winform 截屏功能 图1 主窗体 点击全屏截图,就已经全屏截图了,截图后,图片保存在 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- 基于h5的图片无刷新上传(uploadifive)
基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...
- WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞
漏洞名称: WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞 CNNVD编号: CNNVD-201309-377 发布时间 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径
本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...
随机推荐
- Excel日期格式调整
3-Aug-2008 自定义格式: [$-809]d-mmm-yyyy;@ Aug-2008 自定义格式: [$-809]mmm-yyyy;@
- 简述Markdown的使用方法
MarkdownPad Document Markdown的使用技巧 一.标题 一个”#“表示H1.“##”表示H2... 二.列表 第一点 第二点 注意1.2. -与文本之间要有一个空格 这一点 三 ...
- node.js压缩版 Windows安装
1.下载 下载地址:https://nodejs.org/zh-cn/download/ 选择相应的版本下载 2.解压缩 将文件解压到要安装的位置,并新建两个目录 node-global :npm全局 ...
- 源码安装php时出现configure: error: xml2-config not found. Please check your libxml2 installation
1.检查是否安装了libxml 包 > rpm -qa|grep libxml2 2.如果没有则安装 > yum install libxml2 > yum install libx ...
- linux用户和组
1.用户隶属于用户组的. 2.用户与用户组配置文件 1)用户组配置文件 /etc/group 第一列:用户组的组名 第二列:组密码(真正的密码存储在了gshadow中) 第三列:用户组组ID,用户组唯 ...
- Python使用wxPython、py2exe编写桌面程序-乾颐堂
Python是支持可视化编程,即编写gui程序,你可以用它来编写自己喜欢的桌面程序.使用wxPython来做界面非常的简单,只是不能像C#一样拖动控件,需要自行写代码布局.在完成编写之后,由于直接的p ...
- ubuntu 设置静态ip地址不生效问题
出现了一个问题是,配置了静态ip地址之后,重启网络服务,查看ip地址是生效的,过会再看就 不生效了,查看网上说是由于 network-manager 管理ip地址时候出现的冲突,将network-ma ...
- FSCapture截图软件注册码
企业版序列号: name:bluman serial/序列号/注册码:VPISCJULXUFGDDXYAUYF
- VC6.0 OpenGL环境配置及编程基础
1.一般情况下VC并不携带glut,需要到opengl官网下载,下载地址 http://www.opengl.org/resources/libraries/glut/glut37.zip 解压后 打 ...
- Spark实践 -- 夜出顾客服务分析
原文链接:https://www.cnblogs.com/stillcoolme/p/10160397.html 1 业务需求 最近做的24小时书店大数据平台中的一个需求:获取一段时间内只在晚上进店, ...