AngularJS를 사용하여 양식에 이미지 첨부/표시

Question

현재 AngularJS를 배우고 있으며이를 사용하여 프로젝트 요약을 문서화하는 방법의 일부로 이미지를 업로드하고 표시하고 싶습니다. Angular File Upload를 찾았는데, 내 프로그램에서 어떻게 구현해야하는지에 대해서는 정확히 확신 할 수 없습니다.

기본적으로 내가 지금까지 가지고있는 것은 폼을 생성하는 버튼이며, 제출을 클릭하면 버튼 클릭시 생성되는 디스플레이에 해당 필드가 추가됩니다. 텍스트/숫자 입력란은 잘 보이지만 분명히 이미지를 첨부/업로드하려면 더 많은 작업이 필요합니다.

Demo picture

정확히 제대로 작동하지 않습니다 (내 작업 공간이 공개적으로 볼 수 있도록하는 방법을 너무 잘 모르겠어요 그래서 나는 C9 개발 환경을 사용하고 있습니다,하지만 난 JSFiddle의 기본 코드 세그먼트를 붙여하지만, https://jsfiddle.net/edmond_wu/63v98qt6/9/

var app = angular.module('myApp', []); 
app.controller('ctrl', function($scope) { 
    $scope.global_savings = 0; 
    $scope.items = []; 
    $scope.itemsToAdd = []; 
    $scope.addReport = function(item) { 
     var index = $scope.itemsToAdd.indexOf(item); 
     $scope.global_savings += Number(item.savings); 
     if ($scope.global_savings >= 100000) { 
      alert("Your benchmark of $100,000 has been reached!"); 
     } 
     $scope.itemsToAdd.splice(index, 1); 
     $scope.items.push(angular.copy(item)); 
    } 
    $scope.addNew = function() { 
     $scope.itemsToAdd.push({ 
      title: '', 
      manager: '', 
      savings: '', 
      summary: '', 
      result: '', 
      image: '' 
    }); 
} 

html로는 하단에 전송 버튼이 같은 일이 (제출 버튼을 폼 데이터의 나머지 부분과 함께 이미지를 업로드해야합니다)입니다 : 적어도 당신은 JS 코드를) 볼 수 있습니다 :

<input type="file" class="button" ng-model="itemToAdd.image" accept="image/*"> 

<input type="submit" class="button" ng-click="addReport(itemToAdd)"> 

Answer 1

ng-model의 입력에 type="file"을 사용할 수 없다고 생각합니다.

이

app.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       var reader = new FileReader(); 
       reader.onload = function (loadEvent) { 
        scope.$apply(function() { 
         scope.fileread = loadEvent.target.result; 
        }); 
       } 
       reader.readAsDataURL(changeEvent.target.files[0]); 
      }); 
     } 
    } 
}]); 

그런 다음 입력을 변경하려면 :

<input type="file" class="button" fileread="itemToAdd.image" accept="image/*"> 

당신이 할 일은 현재 각 코드에 지시문을 추가입니다

가 나는 here에서 사용자 정의 지시어를 사용하여 작업 얻을 관리 html의 한 줄을 변경하면됩니다.

jsfidlle : https://jsfiddle.net/63v98qt6/10/

위가 만드는 directive 범위에 대한 개체의 itemToAdd.image에 이미지를 결합 fileread.