Display image using jQuery

Question

When I pick an image, at times it does not display, but when I click a second time, the image is displayed.

jQuery

$('#morefiles').change(function (event) {
  if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test($(this).val())) {
    $ionicPopup.alert({
      title: 'Message',
      template: 'You must select an image file only !'
    });
    $('#morefiles').val('');
  } else {
    var obj = {};
    obj.key = event.target.files[0];
    obj.value = URL.createObjectURL(event.target.files[0]);
    $scope.items.push(obj);
    console.log(JSON.stringify(obj));
    $('#morefiles').val(obj);
  }
});

HTML

<input type="file" multiple="" id="morefiles" accept="image/*" >

How to solve this problem? When the user selects an image I need to display the image at that time. Thanks in advance.

I think this will help you more http://stackoverflow.com/questions/28235246/angularjs-display-base64-image — Parth Trivedi, Nov 27 '15 at 06:55
thanks for replay @Prajwal K M but i not use to store image in remote server i only use to display image — Jatin Devani, Nov 27 '15 at 06:59
display at second time click (e.g. when i select image than preview screen now i click in page or any form control than it will be display ) @sideroxylon — Jatin Devani, Nov 27 '15 at 07:01
$scope.items.push(obj); You need to set ng-src with scope items. For which perpose you write $('#morefiles').val(obj); — Parth Trivedi, Nov 27 '15 at 07:05

Chintan Soni · Accepted Answer · 2015-11-27T08:11:26.640

Okay. I got you.. Add this line:

$scope.$apply();

to your code as below:

$('#morefiles').change(function (event) {
                if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test($(this).val())) {
                    $ionicPopup.alert({
                        title: 'Message',
                        template: 'You must select an image file only !'
                    });
                    $('#morefiles').val('');
                } else {
                    var obj = {};
                    obj.key = event.target.files[0];
                    obj.value = URL.createObjectURL(event.target.files[0]);
                    $scope.items.push(obj);
                    $scope.$apply()
                    console.log(JSON.stringify(obj));

                    $('#morefiles').val(obj);
                }
            });

I too faced this problem. But solved this way. I dont know why I need to do $scope.$apply();. I dont have enough time to dig the stuff. If anyone knows the reason for it, you are most welcome to comment my answer.

sideroxylon · Answer 2 · 2015-11-27T07:38:42.620

Try this:

$(function() {
  $('#morefiles').on('change', gotPic);
});

function gotPic(event) {
  if (event.target.files.length) {
    for (var i = 0; i < event.target.files.length; i++) {
      if (event.target.files[i].type.indexOf('image/') == 0) {
        var src = URL.createObjectURL(event.target.files[i])
        $('#preview').append('<img src = ' + src + '><br>');
      }
    }
  }
}

img {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple="" accept="image/*;capture=camera" id="morefiles">
<br>
<div id="preview"></div>

but i want to display multiple image @sideroxylon – Jatin Devani Nov 27 '15 at 07:28 — Jatin Devani, Nov 27 '15 at 07:28

Display image using jQuery

2 Answers2