AngularJs 上传文件

原创 2016年08月30日 13:38:57

HTML:


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

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

以上方式不可自动把文件同file-model关联, 也就是myFile始终是未定义的。

可以通过一下方式改善:

      <input ng-file-select="onFileSelect($files)" type="file" accept=".csv" > 

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

controller.js:    

$scope.onFileSelect = function (files) {
     $scope.myFile = files;
     console.info('files', files);
    };
   $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl = "/fileUpload";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

ngfileselect.directive.js

  'use strict';
angular.module('idm-admin-ui')
.directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $timeout) {
    return function(scope, elem, attr) {
            var fn = $parse(attr['ngFileSelect']);
            elem.bind('change', function(evt) {
                var files = [], fileList, i;
                fileList = evt.target.files;
                if (fileList != null) {
                    for (i = 0; i < fileList.length; i++) {
                        files.push(fileList.item(i));
                    }
                }
                $timeout(function() {
                    fn(scope, {
                        $files : files,
                        $event : evt
                    });
                });
            });
        };
    }])

fileupload.service.js

  'use strict';
angular.module('idm-admin-ui')
.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(){
             console.log("success------------------");
        })
        .error(function(){
             console.log("error------------------");
        });
    }
}]);
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

AngularJs实现Multipart/form-data 文件的上传

AngularJs实现Multipart/form-data 文件的上传由于公司的需要,我们从java后台传统的JSP转向了使用前后台完全分离的模式来进行开发。后台完全提供接口,可供网页PC端和移动a...

深究angularJS——(上传)FileUploader中文翻译

1.???????http://www.bootcdn.cn/angular-file-upload/readme/ API ? https://github.com/nervgh/angular-...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

关于angular上传文件的一些心得

HTML文档             点击上传                         {{ item...
  • tquank
  • tquank
  • 2016-07-13 10:30
  • 2378

angularjsFileUpload+Springmvc上传文件

angularjsFileUpload+Springmvc上传文件

angularJs中上传图片/文件功能:ng-file-upload

原文技术交流:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/ 在做网站的过...

angular上传文件(点击上传)

Simple example                                     ...
  • tquank
  • tquank
  • 2016-08-02 16:31
  • 1014

AngularJS下$http上传文件(AngularJS file upload/post file)

AngularJS下$http上传文件(AngularJS file upload/post file)上一次因为赶着完成进度,所以用\$.ajax实现了文件上传(上一篇迭代总结有),这阵子需求完成得...

AngularJS 文件上传控件 ng-file-upload

网上可以找到的 AngularJS 的文件上传控件有两个:     angular-file-upload:https://github.com/nervgh/angular-file-upload...
  • yzbben
  • yzbben
  • 2016-10-31 17:32
  • 1189

angularjs 文件上传ng-file-upload插件使用

angularjs文件上传插件使用
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)