2016-05-29 61 views
2

任何人都可以帮助我与此.... 我想浏览文件,并希望保存到一些文件夹使用角度。 这里是我的HTML代码angular.js:9827 POST http:// localhost:64340/Content 405(方法不允许)

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 
<body ng-app="myApp"> 

    <div ng-controller="myCtrl"> 
     <input type="file" file-model="myFile" /> 
     <button ng-click="uploadFile()">upload me</button> 
    </div> 
    <script src="app/fileUpload.js"></script> 
</body> 
</html> 

我的JS控制器的文件:

var myApp = angular.module('myApp', []); 

myApp.config([ 
     '$httpProvider', 
     function($httpProvider) { 
      $httpProvider.defaults.withCredentials = true; 
     } 
]); 

myApp.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function() { 
       scope.$apply(function() { 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]); 

myApp.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() { 
     }) 

     .error(function() { 
     }); 
    } 
}]); 

myApp.controller('myCtrl', ['$scope', 'fileUpload', function ($scope, fileUpload) { 
    $scope.uploadFile = function() { 
     var file = $scope.myFile; 

     console.log('file is '); 
     console.dir(file); 

     var uploadUrl = "/Content"; 

     fileUpload.uploadFileToUrl(file, uploadUrl); 
    }; 
}]); 

我的web.config文件:我已经添加了“访问控制允许来源”但它仍然是行不通的。 有什么我误解?

<configuration> 
    <system.web> 
    <compilation debug="true" targetFramework="4.5" /> 
    <httpRuntime targetFramework="4.5" /> 
    </system.web> 

    <system.webServer> 
    <handlers> 
     <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
     <remove name="OPTIONSVerbHandler" /> 
     <remove name="TRACEVerbHandler" /> 
     <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
    </handlers> 

    <httpProtocol> 
     <customHeaders> 
     <add name="Access-Control-Allow-Origin" value="*" /> 
     <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
     </customHeaders> 
    </httpProtocol> 
    </system.webServer>`` 

错误图:

Not Able to Upload file

回答

0

405错误通常使用POST方法产生。您可能试图在Web站点上引入某种输入表单,但并非所有ISP都允许处理表单所需的POST方法。

服务器需要您在请求标头中指定Content-Type和/或Accept

$http.post(uploadUrl, fd, { 
    transformRequest: angular.identity, 
    headers: { 
     'Content-Type': 'application/json', 
     'Accept': 'application/json' 
    }, 
}) 
+0

我尝试这样做还可以,但同样的错误: ( –

+0

你好,你可以尝试在'

+0

感谢Pratik的帮助,但这也没有解决不了问题。 –

0

在服务器端解决此header添加到响应:

Access-Control-Allow-Methods:POST, GET, PUT, DELETE, OPTIONS 

如果使用PHP的服务器我使用这个脚本:

header('Content-Type: application/json'); 
    header('Access-Control-Allow-Origin: *'); 
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Requested-With, X-YOUR-CUSTOM-HEADER'); 
    header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');