Vorschau der hochgeladenen Datei in AngularJS

Question

Ich verwende Angular File Upload.

http://plnkr.co/edit/qLckEIlNLEcIfvwn4Q5x?p=preview

Ich möchte-Vorschau laden, wenn eine Datei hochgeladen. Können Sie mir einen Vorschlag geben? Hier ist HTML-Code:

<div class="form-group"> 
<div class="fileinput fileinput-new input-group" data-provides="fileinput"> 
    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span> 
    </div> 
    <span class="input-group-addon btn btn-default btn-file"> 
    <span class="fileinput-new">Select to Upload file</span> 
    <input id="fileupload" file-upload="fileUploadOptions" type="file" name="attData" multiple data-sequential-uploads="true" /> 
    </span> 
</div> 

Hier ist mein Controller:

angular.module("myapp", ["ngAnimate", "ngSanitize", "ui.bootstrap"]) 
    .controller("Ctrl", function($scope, $modal, $log) { 

    $scope.openModal = function() { 
     $log.log("opening modal"); 
     var modURL = "modalwindow.html"; 
     var theModal = $modal.open({ 
     scope: $scope, 
     templateUrl: modURL, 
     controller: 'detailController', 
     size: 'lg' 
     }); 
     theModal.opened.then(function() { 
     $log.log("modal opened"); 
     }); 
    }; 
    }) 
    .controller('detailController', function($scope, $modalInstance) { 

    $scope.fileUploadOptions = { 
     notetext: "text", 
     progress: 0 
    }; 

    $scope.closeModal = function() { 
     $modalInstance.close(); 
    }; 
    }) 
    .directive('fileUpload', function($log, $parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
     var options = $parse(attrs.fileUpload)(scope) || {}; 

     element.fileupload({ 
      dataType: 'json', 
      url: '//jquery-file-upload.appspot.com/', 
      done: function(e, data) { 
      $log.log("done accessed"); 
      }, 
      fail: function(e, data) { 
      $log.log("fail accessed"); 
      }, 
      progress: function(e, data) { 
      options.progress = parseInt(data.loaded/data.total * 100, 10); 
      scope.$apply(); 
      $log.log(options) 
      $log.log("progress"); 
      }, 
      //add: function(e,data){ 
      //$log.log("add accessed"); 
      //}, 
      submit: function(e, data) { 
      $log.log("notetext:", options.notetext); 
      data.formData = { 
       Description: options.notetext 
      }; 
      $log.log("submit accessed"); 
      } 
     }); 
     } 
    } 
    }); 

Kennt jemand die Codierung für Vorschaubild? Dank

Answer 1

Ich habe die Lösung in this StackOverflow question, um Ihren Fall vorgesehen angepasst, die ein Dienst fileReader genannt verwendet:

  submit: function(e, data) { 
      $log.log("notetext:", options.notetext, data); 
      scope.file = data.files[0] 
      data.formData = { 
       Description: options.notetext 
      }; 
      fileReader.readAsDataUrl(scope.file, scope) 
          .then(function(result) { 
           scope.imageSrc = result; 
          }) 
      $log.log("submit accessed"); 
      } 

Überprüfen Sie die Code-Änderungen in diesem Plunker.

Im Bild unten Sie das Ergebnis eines Hochladen von Bildern sehen: