文档章节

angularjs文件上传

z
 zhouyc
发布于 2015/09/08 17:33
字数 117
阅读 1748
收藏 4

参考: http://jsfiddle.net/JeJenny/ZG9re/

<div ng-controller = "myCtrl">

    <input type="file" file-model="myFile"/>

    <button ng-click="uploadFile()">upload me</button>

</div>


var myApp = angular.module('myApp', []);


myApp.directive('fileModel', ['$parse', function ($parse) {

    return {

        restrict: 'A',

        link: function(scope, element, attrs) {

            var model = $parse(attrs.fileModel);

            var modelSetter = model.assign;

            

            element.bind('change', function(){

                scope.$apply(function(){

                    modelSetter(scope, element[0].files[0]);

                });

            });

        }

    };

}]);


myApp.service('fileUpload', ['$http', function ($http) {

    this.uploadFileToUrl = function(file, uploadUrl){

        var fd = new FormData();

        fd.append('file', file);

        $http.post(uploadUrl, fd, {

            transformRequest: angular.identity,

            headers: {'Content-Type': undefined}

        })

        .success(function(){

        })

        .error(function(){

        });

    }

}]);


myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

    

    $scope.uploadFile = function(){

        var file = $scope.myFile;

        console.log('file is ' );

        console.dir(file);

        var uploadUrl = "/fileUpload";

        fileUpload.uploadFileToUrl(file, uploadUrl);

    };

    

}]);


本文转载自:http://jsfiddle.net/JeJenny/ZG9re/

上一篇: Restangular的使用
下一篇: MySQL日常管理
z
粉丝 1
博文 50
码字总数 15358
作品 0
大连
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
2018/09/29
0
0
解决Angular CLI找不到模块"angular-devkit/build-angular"的问题

Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。今天执行“ng serve”命令时,竟然报找不到模块"@angular-devkit/build-angular"的错误。 问题背景 执行...

waylau
10/31
221
0
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7.1K
22
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
2018/08/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

目标检测中 yolo 的mAP是什么含义?

mAP定义及相关概念 P => precision,即 准确率 R => recall,即 召回率 PR曲线 = >即 以 precision 和 recall 作为 纵、横轴坐标 的二维曲线。一般来说,precision 和 recall 是 鱼与熊掌 的...

小松1
3分钟前
1
0
用jdk1.8的断言来做非空判断

Assert.notNull(user, "没有获得登录用户信息"); 看源码如下: public static void notNull(Object object, String message) { if (object == null) { throw new IllegalArgum......

architect刘源源
7分钟前
2
0
免费节假日api每一时间更新 2020年 部分节假日安排

根据国务院办公厅关于2020年部分节假日安排的通知国办发明电〔2019〕16号.免费节假日api每一时间更新 2020年 部分节假日安排 http://tool.bitefu.net/jiari/ 各省、自治区、直辖市人民政府,...

xiaogg
10分钟前
3
0
2018NOIP各省一等奖分数线

提高组 普及组

SamXIAO
20分钟前
5
0
常见的PPT时间轴怎么制作,这几种方法你要知道

在PPT当中,时间轴是一个非常重要的一个版块,很多PPT会用它来表示公司的发展历程和项目进度。但是对于PPT时间轴的制作很多人做法是一条直线上添几个点,标注出事件就完成了,可是这样也太过...

TeFuiro
25分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部