AngularJS文件以拖放方式上传显示图像

Question

每当有人使用angular js文件上传将图像拖放到dropbox中时，我都会尝试使其可见我也看过SO上的这篇帖子，但没能让它发挥作用。

我尝试了各种方法，比如显示blob、显示文件，但在将图像放入该区域后，我无法显示图像。

HTML:

<div ng-file-drop ng-model="files" ng-file-change="placeImage()"
drag-over-class="dragover" ng-multiple="false" class="dropbox" allow-dir="true"
accept=".jpg,.png,.pdf">Drop photo here!</div>

AngularJS:

$scope.placeImage = function () {
var files = $scope.files;
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
('.dropper').html(files[i]); //does not work: obvious desperate move
('.dropper').html(files[i].__proto__.__proto__); //Doesn't work (even tried 64base)
}
}
}

将图像放入投递箱后，如何显示图像？

更新

以下也不起作用：

$("<img />").attr("src", files[i]).appendTo(".dropper");

或

$("<img />").attr("src", files[i].__proto__.__proto__).appendTo(".dropper");

然后发生以下错误：

http://localhost:8080/project/[object%20Object] 404 (Not Found)

更新2:

通过使用以下修复：

$scope.placeImage = function () {
var ctx = document.getElementById('canvas').getContext('2d');
var url = URL.createObjectURL($scope.files[0]);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 20, 20);    
}
img.src = url;
}

Answer 1

文件不是HTML元素。您必须将该文件指定为img标记的src。

$("<img />").attr("src", files[i]).appendTo(".dropper");

我认为上面的一行代码可以使用angular内置的jQuery-lite，但它可能需要jQuery。它至少应该让你知道你需要做什么。