cropper插件的使用和 github地址:
我参考的中文文档:
因为我是.net程序员,前几天做图片上传的时候 在网上搜 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'); } } }); })
后来发现,我只要裁剪完图片他就直接将图片保存到服务器,我觉得这算是一个bug,就把它们分开了,只有点击确定(就是类似我修改个人信息,点击确定修改时)时才会修改和保存图片。
一开始 我是完全不懂的,但是实在没有人帮你的时候,你只能靠自己,做的时候才会知道会出什么样的错,什么样的问题,这才是学不到的东西(我认为)。。