Question

我正在使用html5文件阅读器的帮助上传图片，如下所示：

$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 code：

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

但是当我收到我的照片时，我不知道如何表现它。它不是基于64的字符串，从e.target.result读取，我甚至不知道FileReader使用什么。我该如何表示这些数据？

Answer 1

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显示图像的示例

Answer 2

控制器：

$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}}" />

表示由HTML5 FileReader呈现的图像

2 个答案: