angular 图片上传的功能

标签：das   onchange   app   script   var   数据   get   photo   splay   

<script>
$scope.imgChange = function (element) {
if (!element.files[0]) {
// console.log("未选择图片！");
return;
}
$scope.$apply(function(scope) {
var photofile = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var prev_img = document.getElementById("face");
prev_img.src = e.target.result;
var bufferData=prev_img.src.replace(/^data:image\/\w+;base64,/, "");
$scope.imageSrc= btoa(bufferData);
//$scope.imageSrc=prev_img.src
function Uint8ToString(u8a){
var CHUNK_SZ = 0x8000;
var c = [];
for (var i=0; i < u8a.length; i+=CHUNK_SZ) {
c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
}
return c.join("");
}
$scope.u8_2 = new Uint8Array(atob($scope.imageSrc).split("").map(function(c) {
return c.charCodeAt(0); }));//这个用于保存数据
$scope.b64encoded = btoa(Uint8ToString($scope.u8_2));
$scope.image= window.atob($scope.b64encoded);//这个用于页面预览
};
reader.readAsDataURL(photofile);
});
};
</script>
<ion-item class="item-input item-stacked-label">
<input onchange="angular.element(this).scope().imgChange(this)" type="file" multiple accept="image/jpg,image/jpeg,image/png" style="width: 100%; height: 251px; display:block; border: none;opacity: 0;position: absolute;" />
<img id="face" ng-src="{{userInfo.headImage}}" style="width: 100%; height: 251px;" >
</ion-item>

angular 图片上传的功能

标签：das   onchange   app   script   var   数据   get   photo   splay   

原文地址：http://www.cnblogs.com/zhawei/p/7154661.html