2014-09-03 99 views
0

我使用danialfarid庫fileUpload。

https://github.com/danialfarid/angular-file-upload ,我也同樣的事情,就像在「GitHub的頁面上使用的文章」,但我有一個錯誤後,我選擇了文件:「遺漏的類型錯誤:無法讀取屬性‘長度’未定義」,這undefined是$文件。

這裏是我的控制器:

$scope.onFileSelect = function($files) { 
    console.log($files); // undefined 
//$files: an array of files selected, each file has name, size, and type. 
for (var i = 0; i < $files.length; i++) { 
    var file = $files[i]; 
    $scope.upload = $upload.upload({ 
    url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url 
    data: {myObj: $scope.myModelObj}, 
    file: file, 
    }).progress(function(evt) { 
    console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
    }).success(function(data, status, headers, config) { 
    // file is uploaded successfully 
    console.log(data); 
    }); 
} 

};

在我看來:

<input type="file" title="" accept="image/*" ng-file-select="onFileSelect($files)" class="upload" /> 

回答

2

更可能是你錯過了什麼,請參見工作示例應該幫助: http://plnkr.co/edit/fbALEktGuyDY2CNUrwrL?p=preview

JS:

var app = angular.module('plunker', ['angularFileUpload']); 

app.controller('MainCtrl',['$scope', '$upload', function($scope, $upload) { 


    $scope.onFileSelect = function($files) { 


     console.log($files); // undefined 
     //$files: an array of files selected, each file has name, size, and type. 
     for (var i = 0; i < $files.length; i++) { 
     var file = $files[i]; 
     $scope.upload = $upload.upload({ 
      url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url 
      data: { 
      myObj: $scope.myModelObj 
      }, 
      file: file, 
     }).progress(function(evt) { 
      console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
     }).success(function(data, status, headers, config) { 
      // file is uploaded successfully 
      console.log(data); 
     }); 
     } 
    }; 
    } 
]); 

HTML:

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 

    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script> 
     <script src="http://angular-file-upload.appspot.com/js/angular-file-upload.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 

    <input type="file" title="" accept="image/*" ng-file-select="onFileSelect($files)" class="upload" /> 
    </body> 

</html> 
+0

是的,就是一樣。悖論是我的例子完美地在本地磁盤上運行。 – thisninja 2014-09-03 10:41:47

+0

你在活服務器上縮小你的js文件嗎? – sylwester 2014-09-03 10:45:33

+0

@ user3688705我更新了js代碼,請嘗試它 – sylwester 2014-09-03 10:54:25