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[n] = 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对象的后缀名，可以直接转换成原来的类型的图片。