代表圖像

Question

我的圖片上傳與HTML5的FileReader的幫助是這樣的：

$scope.add = function(){ 
    var f = document.getElementById('file').files[0], 
     r = new FileReader(); 

    r.onloadend = function(e){ 
     var data = e.target.result; 
     console.log(data); 
     $http.post(myUrl,{ 
      data: e.target.result, 
      withCredentials: true, 
     }).success(function (dat) { 
      $scope.image = dat; // If you want to render the image after successfully uploading in your db 
     }); 
    } 

    r.readAsBinaryString(f) 
} 

HTML代碼：

<input type="file" id="file" name="file"/> 
<button ng-click="add()">Add</button> 

但是，當我得到我的照片回來我不知道如何表達它。它不是基於64位的字符串，從e.target.result讀取，我甚至不知道FileReader使用什麼。你能幫我代表這些數據嗎？

Answer 1

控制器：

$scope.add = function(){ 
    var f = document.getElementById('file').files[0], 
     r = new FileReader(); 

    r.onload = function(e){ 
     var data = e.target.result; 
     console.log(data); 
     $http.post(myUrl,{ 
      data: data, 
      withCredentials: true, 
     }).success(function() { 
      $scope.image = data; 
     }); 
    }; 

    r.readAsBinaryString(f); 
} 

查看：

<img class="thumb" ng-src="{{image}}" /> 

Answer 2

var reader = new FileReader(); 

reader.onload = function(e) { 
    fileDisplayArea.innerHTML = ""; 

    // Create a new image. 
    var img = new Image(); 
    // Set the img src property using the data URL. 
    img.src = reader.result; 

    // Add the image to the page. 
    fileDisplayArea.appendChild(img); 
} 

下面是關於如何使用的FileReader來顯示圖像的例子