• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

angular4怎么获取图片的宽度?

angularjs 搞代码 4年前 (2021-12-31) 26次浏览 已收录 0个评论

AngularJS 是一个JavaScript框架。它是一个以JavaScript编写的库。它可通过<script>标签添加到HTML页面。AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到HTML。

首先我们需要一个指令来追踪input的change。ngChage不适用input[file]。

app.directive("fileread", [function () {
return {
scope: {
selectedFile: "=",
changed: '&'
},
link: function(scope, element, attributes) {
element.bind("change", function(changeEvent) {
scope.$apply(function() {
scope.selectedFile = changeEvent.target.files[0];
// or all selected files:
// scope.fileread = changeEvent.target.files;
console.log('file selected.');
if (scope.changed()) {
scope.changed()(scope.selectedFile);
}
});
});
}
};
}]);

然后在controller里定义file的变量跟change绑定的function。

$scope.showFileSelectBox = function () {
$("#imgSelectInput").click();
};

$scope.imageSelected = function(file) {
var image;

if (file) {

image = new Image();

image.onload = function () {

$scope.editObj.Width = this.width;
$scope.editObj.Height = this.height;
};

image.src = $window.URL.createObje<strong style="color:transparent">来源gaodai#ma#com搞@@代~&码网</strong>ctURL(file);

}
};

然后是html

<button type="button"  ng-click="showFileSelectBox()">上传</button>
<input type="file" style="display: none" accept="image/*" 
fileread selectedfile="selectedImgFile" id="imgSelectInput" changed="imageSelected" />

以上就是angular4怎么获取图片的宽度?的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:angular4怎么获取图片的宽度?
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址