내가 각도 응용 프로그램에서 이미지 업로드를 받고, 또는 카메라에서거야

Question

각도

의 UI에 표시 한 후 서버에 이미지 전송 자바 스크립트 :

var input = document.querySelector('input[type=file]'); 
var issuediv = document.getElementById('issue'); 

input.onchange = function() { 
    var file = input.files[0]; 
    displayAsImage(file); 
}; 

function displayAsImage(file) { 
    var imgURL = URL.createObjectURL(file), 
    img = document.createElement('img'); 
    img.onload = function() { 
    URL.revokeObjectURL(imgURL); 
    }; 
    img.src = imgURL; 
    issuediv.appendChild(img); 
} 

두 가지 문제 :

1. 이 아니다 각도 코드 인 이미지를 처리하고 난 준비의 각도 틱 방법이 될 것입니다 무슨 JSON을 통해 (MySQL) 데이터베이스에 대한 t?
2. 위의 내용은 Firefox 및 Chrome에서 이미지 모양을 표시하지만 iOS 및 Android 브라우저는 img 태그를 추가하지 않고 작은 미리보기 이미지 만 표시합니다.

Answer 1

당신은 window.FileReader` (예 : 사파리 5.1 정의되지 않은 경우 '에 대한 Daniel Afarid's Angular File Upload

컨트롤러

$scope.selectedFiles = []; 
$scope.dataUrls = []; 
$scope.model = 'test model'; 

$scope.onImageSelect = function($files) { 

    $scope.selectedFiles['image'] = $files[0]; 


    var $file = $files[0]; 
    if (window.FileReader && $file.type.indexOf('image') > -1) { 
     var fileReader = new FileReader(); 
     fileReader.readAsDataURL($files[0]); 

     fileReader.onload = function(e) { 
     $timeout(function() { 
     $scope.dataUrls['image'] = e.target.result; 
      }); 
     } 
    }  

} 

$scope.save_image = function(){ 

     $upload.upload({ 
        data:$scope.model, 
        url: 'the/url', 
        file: $scope.selectedFiles['image'] 

     }).then(//success and error callbacks); 


    } 

보기

<form enctype="multipart/form-data" class="form-horizontal"> 
    <input type="file" ng-file-select="onImageSelect($files)"> 
    <br /> 
    <img ng-show="dataUrls['image']" ng-src="{{dataUrls['image']}}"> 
    <button ng-click="save_image()"></button> 
</form>