I am working on angular application. I am using <input type="file">
for upload images. Here is my HTML code
<ul class="enlarge col-lg-9 margin_top10">
<li ng-repeat="image in images">
<img id="pic1"
src="{{image.photoPath}}" ng-click="readImageUrl();"
style="height: 40px; width: 50px;"/>
<span>
<img src="{{image.photoPath}}"
style="height: 200px; width: 400px;" id="pic2"/>
</span>
<a href="javascript:void(0)" ng-click="deletePhoto(image.photoPath,$index)" title="Delete">×</a>
</li>
<li id="selectedPhotos" style="width:700px;height:100px;float:left;"></li>
</ul>
And here is my function
$scope.readImageUrl = function() {
try {
var input = document.getElementById("fileSel");
if (input.files && input.files[0]) {
/* if(input.files.length==1){
$("#demo").show();
} */
var xhr = new XMLHttpRequest();
xhr.open('GET', input.files[0], true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
localSrc = URL
.createObjectURL(this.response);
};
xhr.send();
var reader = new FileReader();
reader.onload = function(e) {
$('#profilePic1').attr('src',
e.target.result);
$('#profilePic2').attr('src',
e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
} catch (ex) {
console.log(ex);
}
};
The images will upload and save successfully. But I want to give validation like user can not upload image size more than 1 MB. I have no idea how to do this. Please share your ideas. Thanks in advance..