一. 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. 用Karma和Jasmine测试Angular应用

    TEST: Before you've written any of the code, you know how you want it to behave. You have a specific ...

  2. easyDialog弹窗+zTree部门选择

    写一个父页面方法,将name和id赋值 function show(name,id) { $("#deptnoID").val(name); $("#deptnoId&q ...

  3. java运行时数据区域

    数据区域有:程序计步器,虚拟机栈,本地方法栈,java堆,方法区 程序计步器: 它是一块较小的内存空间,它的作用可以看做是当先线程所执行的字节码的信号指示器. 每一条JVM线程都有自己的PC寄存器,各 ...

  4. php分类

    <?php /* * PHP分页类 * @package Page * @Created 2013-03-27 * @Modify 2013-03-27 * @link http://www.6 ...

  5. 4.请求方式为application/json时的接口测试要如何做?

    1.单独新建一个线程组, 在信息头管理器中增加: 在Body Data中,添加json格式的内容(我不会写,直接用fiddler抓包,然后把TextView中的数据复制过来). 2.然后因为登录状态, ...

  6. Apache .htaccess语法之RewriteRule

    [说明]定义重写的规则[语法]RewriteRule Pattern rewritePattern [flags] # 开启 rewrite 功能 Options +FollowSymlinks Re ...

  7. 为Github项目创建文档

    有两种编写方式: In reStructuredText In Markdown In reStructuredText  工具:  pip install sphinx sphinx-autobui ...

  8. smarty基础与实例

    什么是smarty? Smarty是一个使用PHP写出来的模板引擎,是业界最著名的PHP模板引擎之一.Smarty分离了逻辑代码和外在的内容,提供一种易于管理和使用的方法,用来将原本与HTML代码混杂 ...

  9. Sass与Compress实战:第一章

    1.消除冗余代码的方式: ▶通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : # ...

  10. java中三大修饰符

    一.static 1.属性:类变量 定义在类以内,方法以外,全类有效,全类公共一个属性 类变量与创建对象无关,有默认值0 使用方式  类名.类变量     System.out.println(); ...