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" />
angularjs input上传图片前获取图片的Size的更多相关文章
- js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度
html部分 <div class="form-group col-md-12"> <label class="col-md-2 text-right& ...
- matlab获取图片的size属性,长宽
width=size(imread(‘文件名'),2): %获取图像宽length=size(imread(‘文件名'),1): %获取图像长 g=imread(['D:\文件及下载相关\桌面\代码 ...
- .Net 上传图片之前获取图片的宽高
Stream st = Request.Files[0].InputStream; Byte[] buffer = new Byte[st.Length]; ...
- js上传图片前预览方法(支持预览多个图片)
运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...
- angularJS <input type="file> 图片的base64编码
talk is cheap show me the code <input type="file" id="file" name="file&q ...
- Django_上传图片和模版获取图片
需求: 在Django中,上传图片,存入数据库中的文件的路径,而不是图片本身,也就是说,图片等数据静态文件都可以放到第三方服务器上,我想在把图片保存到Django本地项目中,并可以通过Django自带 ...
- C#根据byte前两位获取图片扩展名
C#根据byte前两位获取图片扩展名 /// <summary> /// 根据byte前两位获取图片扩展名 /// </summary> /// <param name= ...
- 从手机获取图片让WebView支持本地上传图片
一,从本地获取相册中的图片,并获取图片的URI 从本地选择图片上传到服务器时,首先要打开本地图片或文件管理器选择要上传的文件,代码如下 Intent intent =newIntent(Intent. ...
- Android中使用OKHttp上传图片,从相机和相册中获取图片并剪切
效果:注意:1:网络权限<;;;); intent.putExtra(); ); intent.putExtra(); intent.putExtra(, byteArrayOutputStre ...
随机推荐
- 团队项目——站立会议DAY9
第九次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:部署总体战略,需求分析,反复运行程序并完善. 2.钟灵毓秀:近一步修改代码,并进行功能性的扩展,不断完善. ...
- 团队项目——站立会议DAY7
第七次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:对功能模块代码进行近一步的审查和辅助,并对出错处进行修改和完善. 2.钟灵毓秀:对代码近一步的修改,将各个 ...
- Guava-Optional可空类型
接上篇Guava之Joiner和Splitter,本篇将介绍Guava的另外一个有用的对象Optional,这在Java中Google Guava首先给我们提出可空对象模型的.在其他语言如c#这是已经 ...
- SQLServer性能优化之 nolock,大幅提升数据库查询性能
公司数据库随着时间的增长,数据越来越多,查询速度也越来越慢.进数据库看了一下,几十万调的数据,查询起来确实很费时间. 要提升SQL的查询效能,一般来说大家会以建立索引(index)为第一考虑.其实除了 ...
- Windows Azure Virtual Machine (25) 使用SSH登录Azure Linux虚拟机
<Windows Azure Platform 系列文章目录> 本文介绍内容适合于Azure Global和Azure China 为什么使用SSH登录Azure Linux虚拟机? 我们 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十六):AccessToken自动管理机制
在<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>中,我介绍了获取AccessToken(通用接口)的方法. 在实际的开发过程中,所有的高级接口都需 ...
- svn add 添加到版本库
转 svn add-添加到版本库 常用操作1.添加一个文件到工作拷贝:$ svn add foo.c 2.当添加一个目录,svn add缺省的行为方式是递归的:$ svn add testdir 3. ...
- Atitit.java图片图像处理attilax总结 BufferedImage extends java.awt.Image获取图像像素点image.getRGB(i, lineIndex); 图片剪辑/AtiPlatf_cms/src/com/attilax/img/imgx.javacutImage图片处理titit 判断判断一张图片是否包含另一张小图片 atitit 图片去噪算法的原理与
Atitit.java图片图像处理attilax总结 BufferedImage extends java.awt.Image 获取图像像素点 image.getRGB(i, lineIndex); ...
- 更新日志 - BugHD iOS 客户端上线
中秋.十一长假归来,"满血复活"的我们做了 fir.im 和 BugHD 的优化更新:) BugHD 新增功能 1.iOS 客户端上线 BugHD iOS 客户端上线了,你可以随时 ...
- iOS-----About Asset Catalog
About Asset Catalogs Use asset catalogs to simplify management of images that are used by your app a ...