Angularjs 업로드 전 이미지 미리보기

Angularjs 업로드 전 이미지 미리보기

안녕하세요, angularjs를 사용하여 이미지를 업로드하기 전에 미리 볼 수 있는 방법이 없을까요?저는 이 도서관을 사용하고 있습니다.https://github.com/danialfarid/angular-file-upload

감사합니다. 제 암호는 다음과 같습니다.

template.template.displate

 <div ng-controller="picUploadCtr">
<form>
        <input type="text" ng-model="myModelObj">
      <input type="file" ng-file-select="onFileSelect($files)" >
 <input type="file" ng-file-select="onFileSelect($files)" multiple>

 </form>
     </div>

controller.controller.controllers

  .controller('picUploadCtr', function($scope, $http,$location, userSettingsService) {

 $scope.onFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
  var $file = $files[i];
  $http.uploadFile({
    url: 'server/upload/url', //upload.php script, node.js route, or servlet uplaod url)
    data: {myObj: $scope.myModelObj},
    file: $file
  }).then(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  }); 
}
}

OdeToCode는 이 물건에 대해 훌륭한 서비스를 게시했습니다.이 간단한 지시문만 있으면 진행 표시줄을 쉽게 미리 볼 수 있습니다.

.directive("ngFileSelect",function(){    
  return {
    link: function($scope,el){          
      el.bind("change", function(e){          
        $scope.file = (e.srcElement || e.target).files[0];
        $scope.getFile();
      });          
    }        
  }

최신 브라우저에서는 모두 사용할 수 있습니다!

예: http://plnkr.co/edit/y5n16v?p=preview

자바스크립트

 $scope.setFile = function(element) {
  $scope.currentFile = element.files[0];
   var reader = new FileReader();

  reader.onload = function(event) {
    $scope.image_source = event.target.result
    $scope.$apply()

  }
  // when the file is read it triggers the onload event above.
  reader.readAsDataURL(element.files[0]);
}

HTML

<img ng-src="{{image_source}}">
<input type="file" id="trigger" class="ng-hide" onchange="angular.element(this).scope().setFile(this)" accept="image/*">

이건 나한테 효과가 있었어.

부트스트랩 v3의 Jasney 확장에서 이미지 업로드 위젯 참조

  // start Picture Preview    
    $scope.imageUpload = function (event) {
        var files = event.target.files;

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();
            reader.onload = $scope.imageIsLoaded;
            reader.readAsDataURL(file);
        }
    }

    $scope.imageIsLoaded = function (e) {
        $scope.$apply(function () {
            $scope.img = e.target.result;            
        });
    }


<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" />
<img class="thumb" ng-src="{{img}}" />

언급URL : https://stackoverflow.com/questions/18754943/preview-image-before-uploading-angularjs