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...
  • wei389083222
  • wei389083222
  • 2016年05月01日 10:44
  • 29417

angular-file-upload angularJS 文件上传

angular-file-upload angularJS文件上传插件
  • qq_36020545
  • qq_36020545
  • 2016年10月14日 10:46
  • 1473

AngularJS上传文件

使用AngularJS上传文件前台是Angular页面 后台使用SpringBoot/SpirngMVC 上传文件 upload.html 上传 upload.js ...
  • u013360850
  • u013360850
  • 2017年02月26日 17:55
  • 1402

angularjs 文件上传

  • 2014年12月11日 13:51
  • 729KB
  • 下载

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

AngularJS下$http上传文件(AngularJS file upload/post file)上一次因为赶着完成进度,所以用\$.ajax实现了文件上传(上一篇迭代总结有),这阵子需求完成得...
  • Jannie_Kung
  • Jannie_Kung
  • 2016年07月28日 17:31
  • 7319

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

angularjs文件上传插件使用
  • lbbknight
  • lbbknight
  • 2017年06月23日 15:20
  • 1117

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

原文技术交流:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/ 在做网站的过...
  • csdnmmcl
  • csdnmmcl
  • 2016年04月01日 09:07
  • 31552

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

1.???????http://www.bootcdn.cn/angular-file-upload/readme/ API ? https://github.com/nervgh/angular-...
  • zcl_love_wx
  • zcl_love_wx
  • 2016年06月16日 16:27
  • 8085

AngularJs 上传文件到服务器

现在项目中需要运用到AngularJs,其中用到AngularJs中上传文件功能,借此,记录下,怎样运用AngularJs中的组件。首先,去下载一个叫ng-file-upload的插件。下载地址:ht...
  • yanchangyufan
  • yanchangyufan
  • 2017年02月21日 19:16
  • 547

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

AngularJS 文件上传控件 ng-file-upload
  • yanqingwen39
  • yanqingwen39
  • 2017年02月16日 15:05
  • 2373
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJs 上传文件
举报原因:
原因补充:

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