这是函数代码,我想将其放入指令中。
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
这是用 JavaScript 编写的。下面是html代码
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
我实际上想上传图像并预览它。
最佳答案
.directive('ngPreviewer', function ($http) {
return {
restrict: 'E',
scope: '=',
link: function (scope, element, attrs) {
scope.previewFile = function () {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
};
},
template: '<input type="file" onchange="angular.element(this).scope().previewFile()"><br><img src="" height="200" alt="Image preview...">'
};
});
然后在您的代码中像这样引用它以使其神奇地出现:
<ng-Previewer></ng-Previewer>
希望这有帮助:)
关于javascript - 如何将此函数放入 angularjs 中的指令中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32006408/