当用户点击每张图片时,我需要在表格单元格中放大图像。 但这些图像是动态加载的,有一个浏览按钮,允许用户选择一个或多个图像。 我如何继续这个?,在ng-click事件图像应该enalrge。 我看到了一个例子 -
How to zoom image with angularJS
和 但这适用于静态图像。
html代码 - >
<section style="padding: 15px;" class="landing-page" ng-controller="ews" >
<table style="width:50%" border="1" ng-init="load()">
<tr>
<th align="center">First</th>
<th align="center">Last</th>
<th align="center">Age</th>
<th align="center">photo</th>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>25</td>
<td>
<input type="file" multiple file-upload />
</td>
<td align="right">
<div ng-repeat="step in files">
<img id="view" ng-src="{{step.src}}" class="thumbnail" height="50" width="50" ng-click="zoom(step.src)" />
</div>
</td>
</tr>
<tr>
<td>BB</td>
<td>BB</td>
<td>50</td>
<td></td>
<td></td>
</tr>
<tr>
<td>CC</td>
<td>CC</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
</section>
Angularjs代码 - &gt;
ews.controller('ews', ['$scope', '$http', function ($scope, $http) {
$scope.files = [];
$scope.$on("fileSelected", function (event, args) {
var r = "d";
var item = args;
$scope.files.push(item);
var reader = new FileReader();
reader.addEventListener("load", function () {
$scope.$apply(function () {
item.src = reader.result;
});
}, false);
if (item.file) {
reader.readAsDataURL(item.file);
}
});
$scope.path = '';
$scope.path2 = '';
$scope.imageUpload = function (event) {
console.log(event)
var files = event.target.files;
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
for (var i = 0; i < files.length; i++) {
reader.readAsDataURL(files[i]);
}
}
$scope.zoom = function (filename) {
var imageId = document.getElementById('view');
if (imageId.style.width == "400px") {
imageId.style.width = "300px";
imageId.style.height = "300px";
} else {
imageId.style.width = "400px";
imageId.style.height = "400px";
}
// var modal = document.getElementById('myModal');
// // Get the image and insert it inside the modal - use its "alt" text as a caption
// var img = document.getElementById('view');
// var modalImg = document.getElementById("img01");
//// var captionText = document.getElementById("caption");
// img.onclick = function (filename) {
// modal.style.display = "block";
// modalImg.src = filename;
// //captionText.innerHTML = this.alt;
// }
}
}]);
ewipApp.directive('fileUpload', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//var d = diffFiles;
//iterate files since 'multiple' may be specified on the element
for (var i = 0; i < files.length; i++) {
//emit event upward
scope.$emit("fileSelected", {
file: files[i]
});
}
});
}
};
});
由于
答案 0 :(得分:1)
您可以根据上述要求尝试使用模态框,这里是参考链接。
https://www.w3schools.com/howto/howto_css_modal_images.asp
下面是我尝试按照你的代码实现的代码,它的工作原理。请试一试。
html代码:
<section style="padding: 15px;" class="landing-page" ng-controller="ews" >
<table style="width:50%" border="1" ng-init="load()">
<tr>
<th align="center">First</th>
<th align="center">Last</th>
<th align="center">Age</th>
<th align="center">photo</th>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>25</td>
<td>
<input type="file" multiple file-upload />
</td>
<td align="right">
<tr ng-repeat="step in files">
<td>
<img id="{{ 'img-' + step.index }}" ng-src="{{step.src}}" class="thumbnail" height="50" width="50" ng-click="zoom(step.file.name)" />
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" ng-click="closeImage()">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img1">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</tr>
</td>
</tr>
<tr>
<td>BB</td>
<td>BB</td>
<td>50</td>
<td></td>
<td></td>
</tr>
<tr>
<td>CC</td>
<td>CC</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
</section>
Angularjs代码:
$scope.zoom = function (filename) {
var file = filename;
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('view');
var modalImg = document.getElementById("img1");
modal.style.display = "block";
for (var i = 0; i < $scope.files.length; i++) {
if ($scope.files[i].file.name === file) {
index = i;
break;
}
}
modalImg.src = $scope.files[i].src;
}
$scope.closeImage = function () {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}