2016-11-28 64 views
0

我在文件上傳工作angularjs是新的,但它不工作讓我錯誤

TypeError: Illegal invocation

我的HTML代碼

<form name="form" enctype="multipart/form-data" class="form-horizontal" onkeypress="return event.keyCode != 13;" id="myform" ng-init="url ='{{url('admincp/schools')}}'; _token ='{{csrf_token()}}'"> 
    <div class="form-group"> 


     <div class="col-md-6"> 
      <label for="name" class="control-label">*School Name:</label> 
      <input type="text" class="form-control" data-validation="required" name="school_name" ng-model="formdata.school_name" value="<% formdata.school_name %>" autofocus> 

     </div> 

     <div class="col-md-6"> 
      <label for="name" class="control-label">*Logo:</label> 
      <input type="file" class="form-control" data-validation="required mime size" data-validation-allowing="jpg, png, gif" data-validation-max-size="5M" name="logo" fileread="formdata.logo" > 
     </div> 

    </div> 
</form> 

我的js代碼是

var app = angular.module('appinit', [],function($interpolateProvider){ 
     $interpolateProvider.startSymbol('<%'); 
    $interpolateProvider.endSymbol('%>'); 
}); 


app.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       var reader = new FileReader(); 
       reader.onload = function (loadEvent) { 
        scope.$apply(function() { 
         scope.fileread = changeEvent.target.files[0]; 
        }); 
       } 
       reader.readAsDataURL(changeEvent.target.files[0]); 
      }); 
     } 
    } 
}]); 

app.controller('CrudController', function ($scope, $http) { 

$scope.save = function (modalstate, id) { 

     var url = $scope.url; 
     var method = "POST"; 
     var data={}; 
     data = $scope.formdata; 

     if (!$("#myform").isValid()) { 
      return false; 
     } else { 

      $http({ 
       method: method, 
       url: url, 
       data: $.param(data), 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 

      }).success(function (response) { 
      }).error(function (response) { 
       alert('This is embarassing. An error has occured. Please check the log for details'); 
      }); 
     } 

    } 
}); 

我覺得問題在於$.param(data)它沒有處理文件對象。我想使這個函數具有一般性,它將用來保存所有數據。我使用的是ng-model="formdata.any_name",所有的輸入都是一般的。我只需撥打$scope.formdata即可獲取所有表單數據。它與我的另一個沒有文件的表單完全一樣,但是當我將它與文件一起使用時,它會出現問題。請幫我解決我的問題

+0

使用''的而不是使用的FileReader URL.createObjectURL(文件) – Endless

回答

2

完整的錯誤信息是:

TypeError: Illegal invocation 
    at add (VM534 [email protected]:8400) 
    at buildParams (VM534 [email protected]:8387) 
    at buildParams (VM534 [email protected]:8381) 
    at Function.jQuery.param (VM534 [email protected]:8420) 
    at ChildScope.vm.save (VM538 script.js:42) 
    at fn (eval at compile (VM536 angular.js:15033), <anonymous>:4:203) 
    at expensiveCheckFn (VM536 angular.js:16123) 
    at callback (VM536 angular.js:26490) 
    at ChildScope.$eval (VM536 angular.js:17913) 
    at ChildScope.$apply (VM536 angular.js:18013) 

基本上AngularJS框架拒絕讓文件的編碼,因爲它需要長期。

Content-Type': 'application/x-www-form-urlencoded'格式上傳文件的效率非常低。相反,請考慮使用內容類型:multipart/form-dataapplication/json

欲瞭解更多信息,請參閱SO: application/x-www-form-urlencoded or multipart/form-data?

還要考慮使用AngularJS formsAngularJS forms.FormController編碼和驗證。

又讀 - 「Thinking in AngularJS」 if I have a jQuery background?