angularjs input上传图片前获取图片的Size

首先我们需要一个指令来追踪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.createObjectURL(file);
 
                }
    };

然后是html

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青枫的专栏

day65_Lucene学习笔记

注意由于语言不同分析器的切分规则也不同,本例子使用StandardAnalyzer,它可以对用英文进行分词。 如下是org.apache.lucene.ana...

153
来自专栏Android机动车

Flutter 实战:撸半个知乎日报~HomePage

https://github.com/zhujian1989/ZhihuDailyPurifyByFlutter

802
来自专栏技术小黑屋

Android中WebView拦截替换网络请求数据

Android中处理网页时我们必然用到WebView,这里我们有这样一个需求,我们想让WebView在处理网络请求的时候将某些请求拦截替换成某些特殊的资源。具体...

882
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:RadTransitionControl

如果展示类似这种比较cool的图片轮换效果,用RadTransitionControl控件就对了,它提供的过渡效果非常cool! 原理并不复杂,可参见以前写的 ...

1957
来自专栏Kubernetes

Kubernetes Scheduler源码分析

本文是对Kubernetes 1.5的Scheduler源码层面的剖析,包括对应的源码目录结构分析、kube-scheduler运行机制分析、整体代码流程图、核...

5708
来自专栏前端儿

Windows下编程--模拟时钟的实现

(4)   编写显示数字时钟函数。注意要自己用矩形填充(FillRect)擦除背景。

951
来自专栏Windows Community

Extensions in UWP Community Toolkit - WebViewExtensions

概述 UWP Community Toolkit Extensions 中有一个为 WebView 提供的扩展 - WebViewExtensions,本篇我们...

3059
来自专栏Porschev[钟慰]的专栏

项目中对图片的缩放和水印效果

///<summary> /// 获取一个图片按等比例缩小后的大小。 ///</summary> ///<param name="maxWidth">需要缩小到...

1586
来自专栏hbbliyong

代码创建 WPF 旋转、翻转动画(汇总)

先建立一个button <Button Width="80" Height="60" Content="旋转" Name="trans" Cl...

2774
来自专栏walterlv - 吕毅的博客

真的要比较 for 和 foreach 的性能吗?(内附性能比较的实测数据)

2017-12-07 15:30

1441

扫码关注云+社区