AngularJS用原生的fileinput上传图片

问题描述：在Angular环境中，使用<input type='file' id='fileUpload'>这个控件进行上传文件，不通过表单提交的方法，而且需要将得到的图片进行裁剪

解决方法：
     先通过

               angualr.element(document.querySelector('#fileUpload)).on('change',fileHandler);

为input空间注册一个绑定的监控事件，fileHandler是这样定义的
     
               function(evt){
                    var file = evt.currentTarget.file[0];
                    var reader = new FileReader();
                    reader.readAsDateURL(url);
                    reader.onload = function(evt){
                       evt.target.result//即为所取到的file的DataURL
                    }
               }

转换成DataURL是为了可以在<img src="" />标签中展示，为了图片的裁剪，在得到最终想要的文件的DataURL后需要将DataURL恢复成文件对象，这里目前只能做到将DataURL转换成Blob对象，这样就可以进行向后台发送。转换函数如下：
          
               function dataURLtoBlob(dataurl){
                        var arr = dataurl.split(','),
                        mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]), n = bstr.length, u8arr = new Unit8Array(n);
                        while(n--){
                            u8arr
= bstr.charCodeAt(n); 
                         } 
                         return new Blob([u8arr],{type:mime});
               }

返回的对象就可以进行发送，发送的代码格式为，

               var fd = new FormData();
               fd.append("image",data);

               $http({
                        method:'POST',
                        url:/xxxx,
                        headers:{
                             'Content-Type':undefined 
                        },
                        data: FormData对象
                        })

          
修改Blob对象的后缀名，可以直接转换成原来的类型的图片。