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插件进行图片裁剪 并上传的更多相关文章

  1. struts2+jsp+jquery+Jcrop实现图片裁剪并上传

    <1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...

  2. HTML5本地图片裁剪并上传

    最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定 ...

  3. 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)

    web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...

  4. C# winform截图、web Cropper图片剪切、上传

    今天又来一弹,写了个小功能,windows 桌面截图,web剪切图片上传的功能. 废话不多说,直接上图: 1.winform 截屏功能 图1 主窗体 点击全屏截图,就已经全屏截图了,截图后,图片保存在 ...

  5. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  6. 基于h5的图片无刷新上传(uploadifive)

    基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploa ...

  7. WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞

    漏洞名称: WordPress Complete Gallery Manager插件‘upload-images.php’任意文件上传漏洞 CNNVD编号: CNNVD-201309-377 发布时间 ...

  8. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  9. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

随机推荐

  1. The valid characters are defined in RFC 7230 and RFC 3986

    网上大都说什么发送格式与协议定义的不兼容,改tomcat版本或改编码之类的. 本人测试的时候换了个浏览器,不用IE就好了 如果坚持用ie,也有解决方式 @参考文章 成功的方法 在请求地址var url ...

  2. 39. recover rotated sorted array恢复旋转排序数组

    一句话思路:从左边开始的三步翻转法 一刷报错: 不理解start.end是位置随机定义的.i,j是临时变量,为start,end服务 nums.size()区别于nums.length:用于范形变量. ...

  3. 旋转链表(所有元素往右移) rotate list

    [抄题]: 给定一个链表,旋转链表,使得每个节点向右移动k个位置,其中k是一个非负数 样例 给出链表1->2->3->4->5->null和k=2 返回4->5-& ...

  4. ROS学习笔记二(创建ROS软件包)

    catkin软件包的组成 一个软件包必须满足如下条件才能被称之为catkin软件包: 必须包含一个catkin编译文件package.xml(manifests文件),此文件包含了描述该软件包的重要信 ...

  5. SVN:项目管理工具

    svn:项目管理工具. 我们在进行团队开发的时候,每个人负责不同的层,比如:A负责DAO层,B负责SERVICE层,C负责DOMAIN层.我们开发完了自己管理的各层后需要将各层整合在一起,肯定不是拿U ...

  6. Python发送邮件不需要发件人密码认证

    #!/usr/bin/python # coding: UTF-8 import smtplib from email.mime.text import MIMEText receivers_list ...

  7. _GET_

    _GET_:读取属性,没有自动创建

  8. dir/

    dos窗口输入dir命令是显示磁盘目录命令: addslashes()使用反斜线转义字符串: exec($command,$output,$return)执行一个外部程序 $command:要执行的命 ...

  9. 怎样完整地离线更新并升级基于 Debian 的操作系统

    不久之前我已经向你展示了如何在任意离线的 Ubuntu 和 Arch Linux 操作系统上安装软件. 今天,我们将会看看如何完整地离线更新并升级基于 Debian 的操作系统. 和之前所述方法的不同 ...

  10. 优质产品需求文档(PRD)写作三大原则

    在上一篇文章中有介绍,产品经理的两项主要职责包括:对产品机会进行评估,以及对开发的产品进行评估.而定义即将开发上线的产品,则需要借助产品需求文档,来进行产品的特征和功能描述.PRD文档的写作会因公司. ...