title: how to preview an image before uploading and replace it with older image after uploading in javascript
body: <p>Hai i am trying to preview an image before it uploading to server and have to replace it with older image.
  here is my html code:::::::</p>
  
  <pre><code> &lt;img class=" thumbnail" data-ng-hide="imageSource==NULL" style="width: 200px; height: 150px;" ng-hide="user.pic" ng-src="{{imageSource}}"&gt;
  
              &lt;img class="hai thumbnail img-responsive" style="width: 200px; height: 150px;" data-ng-show="!imageSource" ng-src="{{user.pic}}"&gt;
  
              &lt;div &gt;
                  &lt;span class="btn btn-default btn-file"&gt;
                    &lt;span class="fileinput-new upload-button"&gt;&lt;span class="glyphicon glyphicon-upload"&gt;&lt;/span&gt; select image&lt;/span&gt;
  
                  &lt;input class="file-upload" ng-model="user.pic" id="FilePhoto"  onchange="angular.element(this).scope().file_changed(this)" type="file" accept="image/*" multiple /&gt;
                  &lt;/span&gt;
  
                  &lt;button type="button" class="btn btn-large btn-primary" ng-click="upload()"&gt;upload me
                  &lt;/button&gt;
  </code></pre>
  
  <p>my script code looks like this.......</p>
  
  <pre><code>$scope.file_changed = function (element) {
              console.log('llllllll');
              var files = element.files; // FileList object
              // Loop through the FileList and render image files as thumbnails.
              for (var i = 0, photofile; photofile = files[i]; i++) {
  
                  var photofile = element.files[0];
                  var reader = new FileReader();
                  reader.onload = (function (theFile) {
  
                      return function (e) {
  $('#blah').attr('src', e.target.result);
                          $rootScope.imageSource = e.target.result;
                          console.log('lllllllldddddddddddddd' + JSON.stringify($scope.imageSource));
                          $scope.img=true;
  
                      };
                  })(photofile);
                  reader.readAsDataURL(photofile);
  
              };
  
  
          }
  </code></pre>
  
  <p>controller for uploading image.............</p>
  
  <pre><code> $scope.upload = function () {
  
              console.log('imageeeee' + JSON.stringify($rootScope.imageSource));
              var image = {
                  pic: $rootScope.imageSource,
              };
              userss.updateimage.update(image, function (result) {
                  console.log("sucessfully image uploaded" + JSON.stringify(result));
              });
          }
  </code></pre>
  
  <p>please help me to solve this problem. every thing working good but i cant able to preview image</p>