使用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目录下 下面就演示如 ...
随机推荐
- actionView
类似于actionBar也是在导航栏里用但是他使用的是menu菜单设置菜单项的AsAction=“always|withText” 本例使用LoaderCallbacks<Cursor>接 ...
- python激活码
- python基础之删除文件及删除目录的方法-乾颐堂
下面来看一下python里面是如何删除一个文件及文件夹的~~ 首先引入OS模块 import os 删除文件: os.remove() 删除空目录: os.rmdir() 递归删除空目录: os.re ...
- dedecms连表查询参照
ixingmeib2c/ds/entity_clas/tc_coupon_index.ls.php下面的getIndexInfo()方法
- 深入浅出 JMS(四) - ActiveMQ 消息存储
深入浅出 JMS(四) - ActiveMQ 消息存储 一.消息的存储方式 ActiveMQ 支持 JMS 规范中的持久化消息与非持久化消息 持久化消息通常用于不管是否消费者在线,它们都会保证消息会被 ...
- 深入理解line-height与vertical-align(1)
http://www.cnblogs.com/xiaohuochai/p/5271217.html
- 【Linux】SVN的安装和配置
SVN SVN:SVN是Subversion的简称,是一种开放代码的版本控制系统,相比较RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制器服务已从CVS迁移到Su ...
- 2018.10.19 NOIP训练 游戏问题(分组背包)
传送门 分组背包经典问题. 令f[i][j]f[i][j]f[i][j]表示前iii组花费为jjj的最优值. g[i][j]g[i][j]g[i][j]表示前iii组,第iii组已经支付了平台费用的最 ...
- 2018.10.18 bzoj1185: [HNOI2007]最小矩形覆盖(旋转卡壳)
传送门 不难看出最后的矩形一定有一条边与凸包某条边重合. 因此先求出凸包,然后旋转卡壳求出当前最小矩形面积更新答案. 代码: #include<bits/stdc++.h> #define ...
- Django的路由层(2)
https://www.cnblogs.com/yuanchenqi/articles/8931472.html django2.0版的path Django默认支持以下5个转化器: str,匹配除了 ...