ng-file-upload with WebService

我正在尝试添加将zip文件上传到服务器的功能。客户端是用AngularJS构建的，服务器端是C＃ASP.NET，但我无法使它工作。ng-file-upload with WebService

我的服务器端代码如下所示：

[System.Web.Script.Services.ScriptService] 
public class xyz : System.Web.Services.WebService 
{ 
// Other WebMethods that work fine 

    [WebMethod] 
    public string UploadFile(byte[] file, string filename) 
    { 
     // do whatever 
    } 
}

而且我使用NG文件上传到尝试做实际的上传。该HTML看起来像：

<form> 
    <div class="form-group"> 
     <label class="control-label h3" for="zipFile">Zip File</label> 
     <input class="form-control my-file" type="file" ngf-select ng-model="zipFile" id="zipFile" name="zipFile" accept=".zip" required /> 
    </div> 
    <button class="btn btn-default" ng-click="submit()">Submit</button> 
</form>

和JavaScript在我的控制器看起来是这样的：

FileLoadController.$inject = ['$scope', 'Upload']; 
function FileLoadController($scope, Upload) { 
    var vm = this; 
    vm.scope = $scope; 
    vm.scope.submit = function() { 
     if (vm.scope.zipFile) { 
      vm.scope.upload(vm.scope.zipFile); 
     } 
    } 

    vm.scope.upload = function (file) { 
     Upload.upload({ 
      url: 'xyz.asmx/UploadFile', 
      data: { 'file': file, 'filename': file.name }, 
      }, 
     }) 
     .then(function (response) { 
      alert(response); 
     }); 
    } 
}

Upload.upload被调用，但绝不会在执行服务器端的UploadFile方法。

这可能是简单的，但我做错了什么？有没有更好的或更容易的方法来做到这一点？

谢谢。

来源

2016-01-06 Alfie Johnson

我最终没有尝试使用现有的WebHandler并专门添加了一个IHttpHandler来上传。我不想添加不同的处理程序，但无论如何工作。

有一个引用ng-upload-file（ng-file-upload .NET example）的例子，但让我总结一下我做了什么。

在我的项目中添加了“通用处理程序”，并将其命名为UploadHandler。
扭捏ProcessRequest方法做我想要
更新了AngularJS控制器发送到新的处理程序
更新了HTML，让大文件
扭捏的web.config文件，让大文件是什么上传

（步骤1 & 2）将通用处理程序到项目创建从IHttpHandler的派生的类，和它看起来像这样

public class UploadHandler : IHttpHandler 
{ 
    public void ProcessRequest(HttpContext context) 
    { 
     context.Response.ContentType = "text/plain"; 

     if (context.Request.Files.Count > 0) 
     { 
      HttpFileCollection files = context.Request.Files; 
      for (int i = 0; i < files.Count; i++) 
      { 
       HttpPostedFile file = files[i]; 
       string fname = context.Server.MapPath("uploads\\" + file.FileName); 
       file.SaveAs(fname); 

       // Do something with the file if you want 
      } 
      context.Response.Write("File/s uploaded successfully"); 
     } 
     else 
      context.Response.Write("No files uploaded"); 
    } 

    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 
}

更新AngularJS控制器（步骤3）使它看起来像这样

vm.scope.submit = function() { 
     if (vm.scope.zipFile) { 
      vm.scope.upload(vm.scope.zipFile); 
     } 
    } 

    vm.scope.upload = function (file) { 
     Upload.upload({ 
      url: 'UploadHandler.ashx', 
      data: { }, 
      file: file 
     }) 
     .then(function (response) { 
      alert(response.data); 
     }) 
    }

（步骤4）添加NGF-MAX-大小，以便文件高达1GB可以上传

<form> 
    <div class="form-group"> 
     <label class="control-label h3" for="zipFile">Zip File</label> 
     <input class="form-control my-file" type="file" ngf-select ng-model="zipFile" id="zipFile" name="zipFile" ngf-max-size="1GB" accept=".zip" required /> 
    </div> 
    <button class="btn btn-default" ng-click="submit()">Submit</button> 
</form>

（步骤5）然后我必须调整web.config文件以允许这些大文件。它涉及到两件事。第一次是的maxRequestLength加入的httpRuntime，像这样：

<configuration> 
    <!--Lots of omitted stuff--> 
    <system.web> 
    <httpRuntime targetFramework="4.5.1" maxRequestLength="1073741824" /> 
    </system.web> 
</configuration>

第二个是增加安全性部分那么大的东西就不会被过滤掉：

<configuration> 
    <!--Lots more omitted stuff--> 
    <system.webServer> 
    <security> 
     <requestFiltering> 
     <requestLimits maxAllowedContentLength="1073741824"/> 
     </requestFiltering> 
    </security> 
    </system.webServer> 
</configuration>

来源

2016-01-07 20:15:50

ng-file-upload with WebService

回答

相关问题