使用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');
               }
         }
     });
})

 

后来发现,我只要裁剪完图片他就直接将图片保存到服务器,就把它们分开了,只有点击提交时才会修改和保存图片。

posted @ 2018-10-23 10:05 HJumping 阅读(...) 评论(...) 编辑 收藏