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 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

silverlight:telerik RadControls中RadGridView的一个Bug及解决办法

当RadGridView中嵌套RadComboBox,且RadGridView的高度不够出现滚动条时,上下拉动滚动条后,RadComboBox中的选中值将丢失!...

1927
来自专栏linjinhe的专栏

LevelDB:使用介绍

Get 接口和 Put 接口比较像,除了 leveldb::ReadOptions 参数是用来控制读操作的,具体见链接指向的代码。

3155
来自专栏c#开发者

Biztalk Server zip unzip pipeline component Development

Biztalk Server zip unzip pipeline component Development 最近有个B2B的项目涉及和其他合作伙伴(part...

3354
来自专栏码农阿宇

NopCommerce开源项目中很基础但是很实用的C# Helper方法

1993
来自专栏码农阿宇

NopCommerce开源项目中很基础但是很实用的C# Helper方法

刚过了个五一,在杭州到处看房子,不知道杭州最近怎么了,杭州买房的人这么多,房价涨得太厉害,这几年翻倍翻倍地涨,刚过G20,又要亚运会,让我这样的刚需用户买不起,...

40111
来自专栏王磊的博客

c# 获取电脑硬件信息通用查询类[测试通过]

C#获取电脑硬件信息通用类[Computer]代码展示和分析,简介如下: 1.项目中添加System.Management引用。 2.添加类Computer,把...

3264
来自专栏我的小碗汤

用go语言爬取珍爱网 | 第一回

在返回体里可以找到<meta charset="gbk" /> 即编码为gbk,而go默认编码为utf-8,所以就会出现乱码。接下来用第三方库将其编码格式转为u...

442
来自专栏林德熙的博客

C# GUID ToString GUID 转 int

最近在看到小伙伴直接使用 Guid.ToString ,我告诉他需要使用 Guid.ToString(“N”) ,为什么需要使用 N ,因为默认的是 D 会出现...

631
来自专栏Android 研究

Android JNI学习(五)——Demo演示

我们这里做一个简单的计算器demo,其中运算的逻辑由Native实现,而且我们采用动态注册的方式来实现

472
来自专栏跟着阿笨一起玩NET

C#常用操作类库五(电脑操作类)

442

扫码关注云+社区