简易上传图片原生input-file实现方案

html:

添加图片({ {allImgBaseData.length}}/5)

 

 
 
 

js:

//上传图片
$scope.allImgBaseData = []; //所有图片的base码集合
$scope.fileChange = function(fil){
var filtext = fil.files[0];
if(parseInt(filtext.size) / 1024 > 1024){
$hctopalert.show({
text: "仅可以上传1M以内的图片"
});
return false;
};
if($scope.allImgBaseData.length>=5){
$hctopalert.show({
text: "图片已达到上限"
});
return false;
};
var reader = new FileReader();
reader.readAsDataURL(filtext);
reader.onload = function() {
var strcode = reader.result;
$scope.allImgBaseData.push(strcode); //储存到数组里
$scope.$apply();
}
};
//选出图片可删除功能
$scope.removeImg = function(index){
$scope.allImgBaseData.splice(index,1);
};