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 ...
随机推荐
- 【bzoj2802】[Poi2012]Warehouse Store 贪心+堆
题目描述 有一家专卖一种商品的店,考虑连续的n天.第i天上午会进货Ai件商品,中午的时候会有顾客需要购买Bi件商品,可以选择满足顾客的要求,或是无视掉他.如果要满足顾客的需求,就必须要有足够的库存.问 ...
- 前端CSS规范大全(转)
一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...
- 学习 WebService 第五步：在Local创建测试用WebService（WSDL）
[准备] Eclipse+Tomcat7(Tomcat端口修改为不冲突的值) axis2 1.7.7 jar包(没有来这里下载:http://www.apache.org/dyn/closer.lua ...
- Java数据库连接JDBC用到哪种设计模式?
还没看桥接模式,占tag 桥接模式: 定义 :将抽象部分与它的实现部分分离,使它们都可以独立地变化. 意图 :将抽象与实现解耦. 桥接模式所涉及的角色 1. Abstraction :定义抽象接口, ...
- xp局域网共享访问没权限处理
参考: http://www.360doc.com/content/11/0114/00/905007_86380468.shtml
- 【CF1020B】Badge（模拟）
题意:给定n个人,每个人指向第a[i]个人,要求输出从每个人开始第一个被访问到两次的人的编号 n<=1e3 思路: #include<cstdio> #include<cstr ...
- LOJ#2304. 「NOI2017」泳池
$n \leq 1e9$底边长的泳池,好懒啊泥萌自己看题吧,$k \leq 1000$.答案对998244353取膜. 现在令$P$为安全,$Q$为危险的概率.刚好$K$是极其不好算的,于是来算$\l ...
- 转 PHP 使用 Redis
PHP 使用 Redis PHP 使用 Redis 安装 开始在 PHP 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 PHP redis 驱动,且你的机器上能正常使用 PHP ...
- 解决npm 的 shasum check failed for错误
使用npm安装一些包失败,类似如下报错情况: C:\Program Files\nodejs>npm update npm npm ERR! Windows_NT 10.0.14393 np ...
- Codeforces 629 A. Far Relative’s Birthday Cake
A. Far Relative’s Birthday Cake time limit per test 1 second memory limit per test 256 megabytes ...