ng-file-upload圖像上傳不起作用

我想在AngularJS中使用ng-file-upload上傳圖像，但它沒有正確地發生，因爲文件相關的屬性，如大小和名稱都顯示爲未定義。我下面的代碼給出：ng-file-upload圖像上傳不起作用

HTML

<form class="form-horizontal" name="reviewForm" role="form" ng-controller="reviewController" ng-submit="reviewSubmit()" novalidate>  
...  
    <input type="file" id="image" ngf-select ng-model="reviewer.image" name="image" ngf-pattern="image/*" accept="image/*" > 
...

angular.module('carApp', ['ngResource', 'ngFileUpload']) 
.controller('reviewController', ['$scope', 'updateReviews', 'Upload', function($scope, updateReviews, Upload) { 

$scope.reviewSubmit = function() { 
    alert($scope.reviewer.image.lastModifiedDate); 
     Upload.upload({ 
      url: 'images', 
      method: 'POST', 
      data: { file: $scope.reviewer.image, number: 10 } 
     }).progress(function(event) { 
      var progressPercentage = parseInt(100.0 * event.loaded/event.total); 
      console.log('progress: ' + progressPercentage + '% ' + event.config.data.file.name); 
     }).success(function(response) { 
      console.log('Success ' + response.config.data.file.name + 'uploaded. Response: ' + response.data); 
     }).error(function(error) { 
      console.log("Error: " + error.message); 
     }); 

     ...

當我檢查的對象類型（即alert($scope.reviewer.image)），它顯示[object File]，但是當嘗試打印名稱和大小等...它總是顯示undefined。請幫忙！！我必須在控制器中正確訪問圖像文件。

來源

2016-04-24 user3033194

請嘗試如下圖所示。這只是圖像上傳程序的工作版本。請根據需要更改屬性。

這是工作Fiddle

的Html

<body ng-app="fileUpload" ng-controller="MyCtrl"> 
    <form name="myForm"> 
    <fieldset> 
     <legend>Upload on form submit</legend> 
     <br>Photo: 
     <input type="file" ngf-select ng-model="picFile" name="file"  
      accept="image/*" ngf-max-size="2MB" required 
      ngf-model-invalid="errorFile"> 
     <i ng-show="myForm.file.$error.maxSize">File too large 
      {{errorFile.size/1000000|number:1}}MB: max 2M</i> 
     <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> 
     <br> 
     <button ng-disabled="!myForm.$valid" 
       ng-click="uploadPic(picFile)">Submit</button> 
     <span class="progress" ng-show="picFile.progress >= 0"> 
     <div style="width:{{picFile.progress}}%" 
      ng-bind="picFile.progress + '%'"></div> 
     </span> 
     <span ng-show="picFile.result">Upload Successful</span> 
     <span class="err" ng-show="errorMsg">{{errorMsg}}</span> 
    </fieldset> 
    <br> 
    </form> 
</body>

var app = angular.module('fileUpload', ['ngFileUpload']); 

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
    $scope.uploadPic = function(file) { 
    file.upload = Upload.upload({ 
     url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
     data: {username: $scope.username, file: file}, 
    }); 

    file.upload.then(function (response) { 
     $timeout(function() { 
     file.result = response.data; 
     }); 
    }, function (response) { 
     if (response.status > 0) 
     $scope.errorMsg = response.status + ': ' + response.data; 
    }, function (evt) { 
     file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
    }); 
    } 
}]);

來源

2016-04-25 09:16:10 Sampath

它不是在Safari工作+贏得-7。請檢查您的演示。 – satya

@satya請在這裏創建一個問題：https://github.com/danialfarid/ng-file-upload/issues – Sampath

@ Samapth：我面臨同樣的問題，並已報告。請檢查此https://github.com/danialfarid/ng-file-upload/issues/1672但還沒有解決方案。 – satya

ng-file-upload圖像上傳不起作用

回答

相關問題