一. 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上传图片插件使用的更多相关文章

  1. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  2. 如何写一个Js上传图片插件。

    项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...

  3. angularJS 常用插件指令

    长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...

  4. Typora-yes:typora最舒适的使用-优化主题+图床服务+自动上传图片插件

    转载注明出处:https://www.cnblogs.com/nreg/p/11992678.html,谢谢 开源项目下载:https://github.com/nreg/typora-yes 云盘: ...

  5. angularjs上传图片

    通过AngularJS实现图片上传及缩略图展示(读取文件内容) AngularJS图片上传功能的实现(读取文件内容) AngularJs实现Multipart/form-data 文件的上传(上传文件 ...

  6. jquery上传图片插件plupload

    官方网站:http://plupload.com/ jquery.plupload.queue插件,是上传图片组件很强大的插件.plupload 前端根据浏览器不同选择使用Html5. Gears, ...

  7. 三、angularjs上传图片

    上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: ...

  8. 转AngularJS路由插件

    AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...

  9. angularjs之插件ngRoute和ngAnimate

    使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html l ...

随机推荐

  1. maven发布本地包,eclipse-maven集成tomcat7热部署项目

    国内maven 库 :http://maven.aliyun.com/nexus/content/groups/public/ maven安装不在中央仓库的jar包: mvn install:inst ...

  2. xampp版本和具体的php,mysql版本的对应

    在国外网上查找到具体的xampp版本与php,mysql版本的对应关系,特此记录.以便需要的人使用.原文链接如下: http://code.stephenmorley.org/articles/xam ...

  3. 【cocos2d-js 3.0】制作2048

    2048:在一个4X4的方阵中,玩家需要滑动上面的数字,如果俩个数字相邻并且相等,则相加,需要达到2048,方可胜利. 因为在浏览器操作,所以此例的操作方法为:键盘上的w,s,a,d代表上下左右,也可 ...

  4. 使用SQL Server视图的优缺点

    SQL Server视图我们经常会用的到,下面就为您介绍使用SQL Server视图的优缺点,希望可以对您SQL Server视图有更多的了解. 在程序设计的时候必须先了解视图的优缺点,这样可以扬长避 ...

  5. 比较C++中的4种类型转换方式(转自http://blog.csdn.net/hrbeuwhw/article/details/7884797)

    C++的四种cast操作符的区别 Q:什么是C风格转换?什么是static_cast, dynamic_cast 以及 reinterpret_cast?区别是什么?为什么要注意? A:转换的含义是通 ...

  6. SpringMVC的@ModelAttribute注解简单使用(用户修改信息)

    例如有一个User对象,我们要修改他的值,但是不能修改他的密码!通过表单提交数据之后,password为null,会把原对象的passwod覆盖掉.这时候可以用@ModelAttribute注解处理. ...

  7. Ubuntu下NFS,TFTP服务搭建

    环境:Ubuntu 一. 搭建NFS服务器 (1)安装: sudo apt-get install nfs-kernel-server   #安装NFS服务器端 sudo apt-get instal ...

  8. [妙味DOM]第四课:Event-事件详解2

    知识点总结 事件捕获 obj.addEventListener('click',fn,true) 从外往里 obj.addEventListener('click',fn,false) 从里往外(冒泡 ...

  9. 一起看看2016中国第三届CSS开发者大会有哪些大咖演讲

    中国第三届CSS开发者大会于2016年12月17日在广州举办.由W3C.w3ctech.前端圈主办.本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊CSS. 快捷报名通道:http://www. ...

  10. HDU1009FatMouse' Trade(贪心)

    Problem Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding th ...