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】P2805植物大战僵尸（拓扑排序+最大流）
题目链接 这题数据xie强qwq.拓扑用的那个图建反了得80. 一眼看出(个屁,题解上都说一眼看出,然而我还是太蒻了)这是个最大权闭合图.从被保护植物向保护植物连边,然后跑最大流,用正点权和减去. 哦 ...
- HDU——1062Text Reverse（水题string::find系列+reverse）
Text Reverse Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...
- [解决方案][错误代码：0x80070002]IIS7及以上伪静态报错404
故障现象:DTCMS开启伪静态功能,VS2010预览正常,发布到IIS后报错404.0错误 (WIN7,WIN8,SERVER2008).模块IISWebCore通知MapRequestHandler ...
- Java面试题之Java中==和equals()和hashCode()的区别
“==”: ==是运算符,用来比较两个值.两个对象的内存地址是否相等: “equals()”: equals是Object类的方法,默认情况下比较两个对象是否是同一个对象,内部实现是通过“==”来实现 ...
- es6总结（二）--正则表达式和字符串
- yii框架缓存知识总结(转载)
缓存是用于提升网站性能的一种即简单又有效的途径.稍微有点规模的网站都会通过存储相对静态的数据至缓存以备所需,这样我们可以省去从数据库查询然后生成这些数据的时间,通过减轻数据库的压力从而提升网站的性能. ...
- 001为什么Linux使用~作为家目录？为什么vim用hjkl作为方向键？
- [Inside HotSpot] UseParallelGC和UseParallelOldGC的区别
JVM的很多参数命名很有迷惑性,-XX:+UseParallel,-XX:+UseParallelOldGC,-XX:+UseParNewGC,-XX:+UseConcMarkSweepGC咋一看容易 ...
- 我的VIM
我的vim 压缩包地址:https://pan.baidu.com/s/1bo1kt8j
- ie下li标签中span加float:right不换行问题解决方案
在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...