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

相关文章

来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

38610
来自专栏冰枫

CountDownLatch和CyclicBarrier解决运动员赛跑多线程问题

最近有道多线程的面试题: 五个运动员(相当于五个线程),一个裁判(Main线程),满足以下三个条件,如何实现: 1.同时起跑 2.要所有运动员都到达终点以...

4287
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4395
来自专栏开发与安全

muduo网络库学习之MutexLock类、MutexLockGuard类、Condition类、CountDownLatch类封装中的知识点

一、MutexLock 类 class MutexLock : boost::noncopyable ? 二、MutexLockGuard类 class Mut...

2450
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7166
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2997
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

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

c#实现打印功能

3702
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2936
来自专栏c#开发者

为什么nhibernate 不能保存on-to-many的结构

下面是主类文件 Code namespace EasyTalk.Module {     /// <summary>     /// SiteAddre...

2565

扫码关注云+社区