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 ...
随机推荐
- 【Luogu】P3317重建（高斯消元+矩阵树定理）
题目链接 因为这个专门跑去学了矩阵树定理和高斯消元qwq 不过不是很懂.所以这里只放题解 玫葵之蝶的题解 某未知dalao的矩阵树定理 代码 #include<cstdio> #inclu ...
- UVa——1593Alignment of Code（string重定向+vector数组）
UVA - 1593 Alignment of Code Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & ...
- 刷题总结——湫湫系列故事——设计风景线（hdu4514 并差集判环+树的直径）
题目: 随着杭州西湖的知名度的进一步提升,园林规划专家湫湫希望设计出一条新的经典观光线路,根据老板马小腾的指示,新的风景线最好能建成环形,如果没有条件建成环形,那就建的越长越好. 现在已经勘探 ...
- 刷题总结——date(ssoj)
题目: 题目背景 SOURCE:NOIP2015-SHY-9 题目描述 小Y和小Z好不容易有机会相见啦,可是邪恶的小H却不想让他们相见.现在有一些城市,城市之间有双向路径相连,有路径相连的城市之间可以 ...
- java面试题之wait()，notify()和suspend()，resume()之间的区别
wait()方法和notify()方法的区别: 这两个方法都是属于Object类中的,也是配套使用的,当调用这两个方法阻塞时要释放占用的锁,而锁是任何对象都具有的,调用任意对象的wait()方法导致线 ...
- DataSet中的表动态设置主键外键的方法
原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] protected void pk_Click(object sender, EventArgs e) { ...
- 在Ubuntu / Ubuntu Kylin下安装和卸载 Nodepadqq
在Ubuntu / Ubuntu Kylin下安装和卸载 Nodepadqq 对于Ubuntu发行版本可以通过PPA安装,命令如下: sudo add-apt-repository p ...
- Yii初学者必看(转载)
Active Record (AR) 是一个流行的 对象-关系映射 (ORM) 技术. 每个 AR 类代表一个数据表(或视图),数据表(或视图)的列在 AR 类中体现为类的属性,一个 AR 实例则表示 ...
- RichEditControl(富文本控件)
可以发邮 件??? https://ww w.evget.com/article/2014/3/25/20723.html
- Codeforces 635D Factory Repairs【树状数组】
又是看了很久的题目... 题目链接: http://codeforces.com/contest/635/problem/D 题意: 一家工厂生产维修之前每天生产b个,维修了k天之后每天生产a个,维修 ...