AngularJS图像输入获取DataURL

Question

我在网站中使用AngularJS，并在网站上是一种形式，允许用户从他们的本地文件系统中选择一个图像，然后希望从该图像获取dataurl。我正在寻找一种以最简单的方式来完成这项工作的方法。然后我想在网页上的某处显示该图像。任何帮助都会很棒。

Answer 1

  <input id="backgroundImageUpload" type="file" onchange="previewFile()"> 
      <br> 
      <img id="backgroundImagebleh" src="" height="200" alt="Image preview..."> 

      <script> 
       function previewFile() { 
        var preview = document.querySelector('#backgroundImagebleh'); 
        var file = document.querySelector('#backgroundImageUpload').files[0]; 
        var reader = new FileReader(); 

        reader.addEventListener("load", function() { 
         preview.src = reader.result; 
         $scope.backgroundFile = reader.result; 
        }, false); 

        if (file) { 
         reader.readAsDataURL(file); 
        } 
       } 

Answer 2

你可以使用下面的指令https://github.com/danialfarid/ng-file-upload，这里有很好的例子。