angularjs上传图片插件使用
一. angurlajs 相关
远程 jar 包 https://code.angularjs.org/angular-1.0.1.min.js
二. 正文
1. html 部分
<!-- 需要引入的包 -->
<script src="/angular/angular.js"></script>
<script src="/angular-file-upload/ng-file-upload.js"></script> <!-- html -->
<div ng-app="upload"><!-- 自定义ng-app的值 -->
<div ng-controller="uploadController"><!-- 自定义ng-controller的值 -->
<div ngf-select="upload($file)"></div><!-- upload是允许自定义的方法名 -->
</div>
</div>
2. js 部分
// 'upload' 是上面自定义的ng-app
var app = angular.module('upload', ['ngFileUpload']);
// 'uploadController' 是上面自定义的ng-controller
app.controller('uploadController',['$scope','Upload', function ($scope,Upload) { // upload是上面允许自定义的方法名
$scope.upload = function (file) {
if (file == null) {
return;
}
Upload.upload({
url: url,
data: {file: file}
}).then(function (result) {
console.log(result);
}, function (resp) {
//console.log('Error status: ' + resp.status);
}, function (evt) {
//var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
//console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
}]);
angularjs上传图片插件使用的更多相关文章
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- 如何写一个Js上传图片插件。
项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...
- angularJS 常用插件指令
长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...
- Typora-yes:typora最舒适的使用-优化主题+图床服务+自动上传图片插件
转载注明出处:https://www.cnblogs.com/nreg/p/11992678.html,谢谢 开源项目下载:https://github.com/nreg/typora-yes 云盘: ...
- angularjs上传图片
通过AngularJS实现图片上传及缩略图展示(读取文件内容) AngularJS图片上传功能的实现(读取文件内容) AngularJs实现Multipart/form-data 文件的上传(上传文件 ...
- jquery上传图片插件plupload
官方网站:http://plupload.com/ jquery.plupload.queue插件,是上传图片组件很强大的插件.plupload 前端根据浏览器不同选择使用Html5. Gears, ...
- 三、angularjs上传图片
上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: ...
- 转AngularJS路由插件
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...
- angularjs之插件ngRoute和ngAnimate
使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...
随机推荐
- Python学习之旅--第二周--python基础
一.什么是pyc? 1.Python是解释性语言,那么.pyc是什么文件? 2.解释性语言和编译型语言区别: 计算机是不能够识别高级语言的,所以当我们运行一个高级别语言程序时,就需要一个&quo ...
- C# 常用接口学习 IComparable 和 IComparer
C# 常用接口学习 IComparable 和 IComparer 作者:乌龙哈里 时间:2015-11-01 平台:Window7 64bit,Visual Studio Community 201 ...
- 没事抽空学——c语言指针操作基础概念
指针基础 理解指针的最佳方法是画图,学习使用基本指针,不要产生空指针. 存储控件分配 存储控件分配是指在内存预留空间的过程.就像一个虚拟菜谱一样,指针对应菜名,其所指的内存空间中的数据对应实际的菜. ...
- hadoop 常用配置项【转】
hadoop 常用配置项[转] core-site.xml name value Description fs.default.name hdfs://hadoopmaster:9000 定义 ...
- spring注解支持
Spring基于注解实现Bean定义支持如下三种注解: Spring自带的@Component注解及扩展@Repository.@Service.@Controller JSR-250 1.1版本中中 ...
- apache动态编译与静态编译
静态: 在使用./configure 编译的时候,如果不指定某个模块为动态,即没有使用:enable-mods-shared=module或者enable-module=shared 这个2个中的一个 ...
- 关于Cocos2dx之JS创建项目
环境: cocos2dx -3.10 ndk - r9 sdk 1.进入到指定的项目的目标目录下面去,然后执行cocos new -l js ProjectName 进入对应目录查看:
- MongoDB数据模型(二)
原文地址 接上一篇 四.模型树结构 父引用的模型树结构 这个数据模型描述了一个树形结构,在子节点中存储父节点的引用. 模式 父引用模式存储每个树节点到文档中,除了树节点外,文档还存储了父节点的id. ...
- 浙大 pat 1023题解
1023. Have Fun with Numbers (20) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...
- 一、链接Sql Server2014提示找不到实例的问题解决方案
在登录数据库时,确认数据库地址.用户名.密码正确的情况下,却报如下错误,则说明目标数据库服务器有相应的服务未启动. 在目标数据库服务器中打开服务列表: 找到SQL Server(****)服务(括号中 ...