![angularJS <input type="file> 图片的base64编码]( "angularJS <input type=\"file> 图片的base64编码")
talk is cheap show me the code
<input type="file" id="file" name="file"
ng-model="Ctrl.picture"
accept="image/jpeg,image/png,image/jpg"
onchange="angular.element(this).scope().deCtrl.handleConFiles(this.files)">
坑一：angularJS的input-file会让ng-change失效
解决办法是用onchange覆盖ng-change，格式为：
onchange="angular.element(this).scope().yourfunction()
如何才能获取图片的base64编码？
HTML代码里，onchange事件触发的handleConFiles函数，如下：
function handleConFiles(files){
var file = files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(theFile) {
console.log(theFile.target.result) //base64编码
};
}
注意第二行，file=files[0]，如果不加这一行，会报错
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
具体原因暂时还不清楚，猜测是参数类型的问题，欢迎dalao们留言指正。
FileReader()读取文件，readAsDataURL读取指定file or Blob对象中的内容。关于更多FileReader的知识，猛戳这里
theFile.target.result就是需要的图片base64编码，也不完全是。
这里获取的base64字符串具有一定的格式，console.log(theFile.target.result)会发现，打印出来的数据为：
data:image/png;base64,base64string
前缀是对后面字符串的修饰和说明，指明这是一张图片的base64编码字符串，因此如果需要做图片预览，直接赋值给src就可以了
<img ng-src="{{Ctrl.picture}}">
到此获取到了图片的base64编码，结束？
NO！
这里还有一个坑。。。。
虽然获取到了图片的base64编码，同时也绑定到了picture上，但是提交表单的时候，picture的值为C://fakepath/图片名。
猜想是由于ng-model绑定着picture的值，选取文件默认赋值为C://fakepath/..因而后续的表单操作使得已经获取到的base64编码字符串被覆盖。picture的值还原为C://fakepath/..
解决办法：获取到base64编码之后，用一个变量存储该字符串，在提交表单时再赋值给picture
本篇完！
