图片,文件上传

利用H5中FormData对象上传图片

•

以前上传图片，文件需要借助插件，不借助插件根本写不了(主要还是太菜)。今天小菜记录下用formDataAPI上传，非常简单。

1.上传图片

这个demo是用jq写的，不要问我为什么，jq获取dom太方便了。这个例子可以用js,jq,mvvc框架都可以.

记录angular 1.6 绑定chang方法 onchange="angular.element(this).scope().uploadPortrait(event)"

方法：upLoadImg(event)

参数：event

参数类型必填说明
eventObject是事件对象
function upLoadImg(event){
    let imgInfo = event.target.files[0];
    //效验
    //根据imgInfo中name,size,type,lastModifiedDate来效验
	
    //预览
    let windowURL = window.URL || window.webkitURL;
    let imgsrc = windowURL.createObjectURL(imgInfo);  //获取二进制路径
	
    //检测图片宽，高
    let _img = new Image();
        _img.onload = function(){
            let imgW = _img.width,
                imgH=_img.height;
            if(imgW!= 200 || imgH != 200){
               alert('请上传200px * 200px 图片');
               return false;
            }			
        };
    _img.src = imgsrc;	
	
    //上传
    let formData = new FormData();   //创建 FormData对象
    formData.append('file', imgInfo);  //添加数据
	
    $.post(url,formData,function(data){
      //上传成功后做某些事
    });
}

2.获取本地图片base64

   let reader = new FileReader();
   reader.readAsDataURL(imgInfo);
   reader.onload=function(){
       let imgBase64 = this.result;
       console.log(imgBase64);				
   }

3.裁剪图像

canvas图像裁剪在canvas/头像裁剪, 头像裁剪传送门“http://waliblog.com/canvas/2018/02/24/portraitNailor.html”