我试图在有人使用 angular js file upload 将图像拖放到保管箱中时使图像可见 我也看过at this post在 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)
}
}
}
图片放入 dropbox 后如何显示?
更新
以下也不起作用:
$("<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;
}
最佳答案
文件不是 HTML 元素。您必须将该文件指定为 img 标签的 src。
$("<img />").attr("src", files[i]).appendTo(".dropper");
我认为上面的一行代码可以与 angular 的内置 jQuery lite 一起使用,但它可能需要 jQuery。它应该至少让您了解需要做什么。
关于AngularJS文件上传拖放显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29703429/