一. 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. codefirst mvc Self referencing loop detected for property

    登录时,json序列化用户类时提示错误"Self referencing loop detected for property--",经过5个小时的查找,发现原因可能是,用户类包含 ...

  2. textview设置不同字体大小

    <style name="style0"> <item name="android:textSize">19dip</item&g ...

  3. javascript 私有方法的实现

    原文地址: http://frugalcoder.us/post/2010/02/11/js-classes.aspx Classy JavaScript - Best Practices 11. F ...

  4. Oracle SQL 关键字

    1.UID返回标识当前用户的唯一整数SQL> show userUSER 为"GAO"SQL> select username,user_id from dba_use ...

  5. wxWidgets显示视频

    wxWidgets中似乎没有专门用于显示视频的控件(虽然有wxWidgets本身的openGL控件wxGLCANVAS,但是我没有去试--) 按照这篇文章所讲的,从wxPanel继承出一个DrawPa ...

  6. form表单直接传文件

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. POJ - 1330 Nearest Common Ancestors(基础LCA)

    POJ - 1330 Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000KB   64bit IO Format: %l ...

  8. 关于ajax后台success传来json数据的问题

    最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简单进 ...

  9. 老司机的奇怪noip模拟T2-huangyueying

    2. 黄月英(huangyueying.cpp/c/pas )[问题描述]xpp 每天研究天文学研究哲学,对于人生又有一些我们完全无法理解的思考.在某天无聊学术之后, xpp 打开了 http://w ...

  10. Ubuntu 14.04 apt源更新

    # 14.04 下进 my /etc/apt/sources.list /etc/apt/sources.bak vi /etc/apt/sources.list 从以下源中选择一个 源列表 Trus ...