angular input file 上传文件
<body >
<div ng-controller="fileCtrl">
<form ng-submit="submit(obj)">
<input type="file" ng-file-model="obj.testFile" />
<input type="submit" value="submit" />
</form>
Submitted File :
<pre> </pre>
</div>
<script>
angular.module("myApp", [])
.controller("fileCtrl",["$scope", function($scope){
$scope.submittedFile = {};
$scope.obj = {};
$scope.submit = function(obj){
console.log(JSON.stringify(obj.testFile)) }
}]) .directive("ngFileModel", [function () {
return {
scope: {
ngFileModel: "="
},
link: function (scope, element, attributes) {
element.bind("change", function (changeEvent) {
var reader = new FileReader();
reader.onload = function (loadEvent) {
scope.$apply(function () {
scope.ngFileModel = {
lastModified: changeEvent.target.files[0].lastModified,
lastModifiedDate: changeEvent.target.files[0].lastModifiedDate,
name: changeEvent.target.files[0].name,
size: changeEvent.target.files[0].size,
type: changeEvent.target.files[0].type,
data: loadEvent.target.result
};
});
}
reader.readAsDataURL(changeEvent.target.files[0]);
});
}
}
}]);
</script>
</body>
angular input file 上传文件的更多相关文章
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- input file上传文件
如何使用input[type='file']来上传文件呢? html: //angular<input type="file" (change)="fileChan ...
- input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- 使用input file上传文件中onChange事件只触发一次问题
每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...
- input file上传文件扩展名限制
方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...
- input file上传文件弹出框的默认格式设置
我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...
- input:file上传文件类型(记录)
imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="fil ...
随机推荐
- JavaScript阻止冒泡和取消事件默认行为
//功能:停止事件冒泡 function stopBubble(e) { if ( e && e.stopPropagation ) { e.stopPropagation(); } ...
- Qtree
Qtree Ⅰ 题意:https://vjudge.net/problem/SPOJ-QTREE 带修路径查询最大边权 sol :树链剖分,之后每条重链就是一个连续的区间,拿线段树维护即可 简单讲讲 ...
- CentOS7 修改时区、charset
1. 修改时区 ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 经过这番修改后,JAVA启动后自动使用了Shanghai作为时区. 2. ...
- Django AUTHENTICATION_BACKENDS
指定认证后端 Django维护一个”authentication backends”的列表用来测试认证.当调用 django.contrib.auth.authenticate() — Django将 ...
- 根据已知日期（yyyy-MM-dd）获取前n天的日期区间
//获取天 var pubTime="2017-12-30" function buildDay(num){ num=num-1; var myDate = new Date(pu ...
- 手機 停充的種類 與 量測 power consumption 功率 使用 bq25896 bq25890
Precondition : 配有 power path 功能的 BQ2589 手機. 接上 pc usb port. Origin : 今天有同事問我, 手機是否可以在接上 pc usb port ...
- Linux 之 文件搜索命令
文件搜索命令 参考教程:[千峰教育] 文件搜索定位 grep: 作用:通用规则表达式分析程序,是一种强大的文本搜索工具, 它能使用正则表达式搜索文本,并把匹配的行打印出来. 格式:grep [选项] ...
- linux下网络监控神器"iptraf-ng"
优点:监控的网络信息很全面,安装和使用方便 #centos安装: #yum 源使用centos自带的base源即可. yum install -y iptraf-ng #运行 iptraf-n ...
- hdu 5459(递推好题)
Jesus Is Here Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/102400 K (Java/Others)To ...
- AC日记——魔术球问题 洛谷 P2765
题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2个相邻球的编号之和为完全 ...