1

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">&times;</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..

Pooja
  • 105
  • 4
  • 16

0 Answers0