AngularJS 文件上传拖拽显示图片

Question

我正在尝试使图像在有人使用 angular js file upload 将其拖放到保管箱中时可见我也在 SO 上查看了 at this post，但没能成功。

我尝试了各种方法，例如显示 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 精简版一起使用，但它可能需要 jQuery。它应该至少让您了解需要做什么。

AngularJS 文件上传拖拽显示图片

AngularJS file upload display image in drag and drop

angularjs

angular-file-upload