文件上传不适用于 angular 和 webmethod [英] File upload not working with angular and webmethod

问题描述

我基本上是在尝试使用 angular 和 webmethod 上传文件.我从这个 博客 中获取了代码，但它不起作用.从提琴手看到的请求是成功的，但 Web 方法永远不会被调用.

我做错了吗?

以下是我的代码.

angular.module('loader', ['ui.router', 'ui.bootstrap', 'ui.filters']).controller('loader-main', function($rootScope, $scope, WebServices) {$scope.uploadNewFile = function() {WebServices.uploadFile($scope.myfile);}}).factory('WebServices', function($rootScope, $http) {返回 {postFile:函数(方法，上传数据){var uploadUrl = "myASPXPAGE.aspx/" + 方法；返回 $http.post(uploadUrl, uploadData, {变换请求:angular.identity，标题:{'内容类型':未定义}}).成功(功能(数据){///控制到达这里但从未命中服务器方法});},上传文件:函数(文件数据){var fd = new FormData();fd.append('文件', 文件数据);return this.postFile("UploadFile", fd);}};}).directive('fileModel', ['$parse',功能($解析){返回 {限制:'A'，链接:函数($scope，元素，属性){var model = $parse(attr.fileModel);var modelSetter = model.assign;element.bind('change', function() {$scope.$apply(function() {modelSetter($scope, element[0].files[0]);});});}}}]);

<div class="col-xs-5"><div class="col-xs-4">浏览到文件:</div><div class="col-xs-1"><input type="file" id="uploadFile" class="btn btn-default" file-model="myfile"/><input type="button" class="btn btn-primary" value="加载文件" data-ng-click="uploadNewFile()"/>

这是我的 WebMethod

 [WebMethod]公共静态字符串 UploadFile(){System.Diagnostics.Debugger.Break();返回完成"；}

解决方案

想通了.您不能在 webmethods 中将 Content-Type 作为 multipart/form-data.而是创建了一个 HttpHandler 来上传文件，一切正常.

I am basically trying to upload a file using angular and a webmethod. I took the code from this blog but it does not work. The request is successfull as seen from fiddler but the web method never gets invoked.

Am I doing something wrong?

Following is my code .

angular
  .module('loader', ['ui.router', 'ui.bootstrap', 'ui.filters'])
  .controller('loader-main', function($rootScope, $scope, WebServices) {
    $scope.uploadNewFile = function() {
      WebServices.uploadFile($scope.myfile);
    }
  }).factory('WebServices', function($rootScope, $http) {
    return {
      postFile: function(method, uploadData) {

        var uploadUrl = "myASPXPAGE.aspx/" + method;
        return $http.post(uploadUrl, uploadData, {
          transformRequest: angular.identity,
          headers: {
            'Content-Type': undefined
          }
        }).success(function(data) {
          ///Control reaches here but never hits the server method
        });
      },
      uploadFile: function(filedata) {
        var fd = new FormData();
        fd.append('file', filedata);
        return this.postFile("UploadFile", fd);
      }
    };
  }).directive('fileModel', ['$parse',
    function($parse) {
      return {
        restrict: 'A',
        link: function($scope, element, attr) {
          var model = $parse(attr.fileModel);
          var modelSetter = model.assign;
          element.bind('change', function() {
            $scope.$apply(function() {
              modelSetter($scope, element[0].files[0]);
            });
          });
        }
      }
    }
  ]);

<div class="row">
  <div class="col-xs-5">
    <div class="col-xs-4">Browse to File:</div>
    <div class="col-xs-1">
      <input type="file" id="uploadFile" class="btn btn-default" file-model="myfile" />
      <input type="button" class="btn btn-primary" value="Load File" data-ng-click="uploadNewFile()" />
    </div>
  </div>
</div>

And here is my WebMethod

    [WebMethod]
    public static string UploadFile()
    {
        System.Diagnostics.Debugger.Break();
        return "Done";
    }

解决方案

Figured it out. You cannot have Content-Type as multipart/form-data in webmethods. Instead created a HttpHandler to upload the file and everything works just fine.

这篇关于文件上传不适用于 angular 和 webmethod的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！