angularjs图片上传和预览 - ng-file-upload
ng-file-upload
ajax上传文件
安装
bower install ng-file-upload-shim --save(for non html5 suppport)
bower install ng-file-upload --save
使用实例
<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<h4>Upload on file select</h4>
<button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
Select File</button>
<br><br>
File:
<div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
<span class="progress" ng-show="f.progress >= 0">
<div style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"></div>
</span>
</div>
{{errorMsg}}
</body>
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.uploadFiles = function(file, errFiles) {
$scope.f = file;
$scope.errFile = errFiles && errFiles[0];
if (file) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {file: file}
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
}
}
}]);
.thumb {
width: 24px;
height: 24px;
float: none;
position: relative;
top: 7px;
}
form .progress {
line-height: 15px;
}
.progress {
display: inline-block;
width: 100px;
border: 3px groove #CCC;
}
.progress div {
font-size: smaller;
background: orange;
width: 0;
}
angularjs图片上传和预览 - ng-file-upload的更多相关文章
- angularjs图片上传和预览 base64
angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http: ...
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- JQuery插件：图片上传本地预览插件，改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
随机推荐
- Python 可命名元祖
import collections MytupleClass = collections.namedtuple('MytupleClass',['x','y','z']) obj = Mytuple ...
- 51Nod 算法马拉松28 B题 相似子串 哈希
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - 51Nod1753 题意概括 两个字符串相似定义为: 1.两个字符串长度相等 2.两个字符串对应位置上有且仅有 ...
- 【Java】 剑指offer(59-2) 队列的最大值
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 请定义一个队列并实现函数max得到队列里的最大值,要求函数ma ...
- Strom的集群停止以及启动
一:停止 1.概述 关于strom没有停止命令 2.第一种方式(kill) jps之后 使用bin/strom -kill wordcount 3.第二种方式(书写脚本) 4.先新建superviso ...
- drupal8
创建drupal的博客教程地址 区域:主题中必须定义 content 区域:因为内容(文章列表)就在content区域 定义成区块的时候可以将试图的区块放在内容区域里面: 视图通过区块和页面来显示在页 ...
- POJ 1375 Intervals 光源投影【平面几何】
<题目链接> <转载于> 题目大意: 给一个光源点s,给一些圆,源点和s相切会形成阴影,求每一段阴影在横轴上的区间. 解题分析: 这道其实不需要点与圆切线的板子来求解,完全可以 ...
- DNS信息收集命令nslookup
DNS信息收集--NSLOOKUP 前面文章我介绍了dig命令,NSLOOKUP命令用法差不多 简单查询 语法:nslookup domain [dns-server] nslookup www.si ...
- 两类传输协议：TCP，UDP
1) TCP是Transfer Control Protocol的简称,是一种面向连接的保证可靠传输的协议.通过TCP协议传输,得到的是一个顺序的无差错的数据流.发送方和接收方的成对的两个socket ...
- sleep() 和 wait() 有什么区别？
sleep:Thread类中定义的方法,表示线程休眠,会自动唤醒: wait:Object中定义的方法,需要手工调用notify()或者notifyAll()方法. sleep是线程类(Thread ...
- 获取AFP共享的文件夹及其权限
获取AFP共享的文件夹及其权限 获取AFP服务的认证信息后,渗透测试人员就可以使用afp-showmount脚本获取共享的文件夹信息,以及各级用户权限信息.其中,用户包括所有者.组.Everyon ...