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 ...
随机推荐
- 【CCF】高速公路 tarjan强连通缩点
[题意] 给定一个有向图,问图中互相可达(强连通)的点有多少对 [AC] 强连通缩点,缩点后是一个DAG,所以互相可达的点只在强连通块里. #include<iostream> #incl ...
- 超爽的Windows终端Cmder
我们常常看到科研.军事.编程上用的计算机系统是"黑洞洞"的,没有桌面.相对我们现在使用的Windows系统,既方便又美观,那么他们怎么不用Windows一样的图形化界面呢? 告诉你 ...
- postgresql-9.0.18-1-linux.run启动
下载地址:http://www.enterprisedb.com/products-services-training/pgdownload选择合适版本 基本都是下一步就可以到设置密码时记住密码以后要 ...
- Vijos 1323: 化工厂装箱员
题形:DP 题意:A,B,C三种物品,一共N个,顺序摆放,按顺序拿.每次手上最多能拿10个物品,然后可以将某个类别的物品分类放好,再从剩下的拿,补全10个.问最少放几次,可以把所有物品分类好. 思路: ...
- k8s之pod控制器
1.生产中,很少会跑一个自主式pod,一般由控制器去创建pod,其配置文件中内嵌了pod的创建方式. pod控制器:ReplicaSet.Deployment.DaemonSet.Job.Cronjo ...
- Spring Boot中实现异步调用之@Async
一.什么是异步调用 “异步调用”对应的是“同步调用”,同步调用指程序按照定义顺序依次执行,每一行程序都必须等待上一行程序执行完成之后才能执行:异步调用指程序在顺序执行时,不等待异步调用 的语句返回结果 ...
- SpringMVC整合MongoDB
首先,在pom文件中新增spring-data-mongodb的依赖: <dependency> <groupId>org.springframework.data</g ...
- HDU3625 Examining the Rooms
@(HDU)[Stirling數] Problem Description A murder happened in the hotel. As the best detective in the t ...
- eclipse代码不能自动提示的问题解决
步骤如下:window->Preferences->Java->Editor->content assist 替换输入成: 普通:[.abcdefghijklmnopqrstu ...
- SpringUtils写法
@Componentpublic class SpringUtils implements ApplicationContextAware { @Override public void setApp ...