使用WebService进行ng-file-upload

时间:2016-01-06 21:06:13

标签: c# asp.net angularjs web-services ng-file-upload

我试图添加将zip文件上传到服务器的功能。客户端是使用AngularJS构建的,服务器端是C#ASP.NET,但是我无法使用它。

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

[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-file-upload尝试进行实际上传。 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方法。

它可能很简单,但我做错了什么?是否有更好或更容易的方法来做到这一点?

谢谢。

1 个答案:

答案 0 :(得分:2)

我最终没有尝试使用现有的WebHandler并添加了专门用于上传的IHttpHandler。我不想添加不同的处理程序,但无论如何都可以。

ng-upload-file(ng-file-upload .NET example)引用了一个示例,但让我总结一下我的所作所为。

  1. 在我的项目中添加了“Generic Handler”,并称之为UploadHandler。
  2. 调整ProcessRequest方法以执行我想要的操作
  3. 更新了AngularJS控制器以发送给新处理程序
  4. 更新了HTML以允许大文件
  5. 调整web.config文件以允许上传大文件
  6. (步骤1和2)将Generic Handler添加到项目中会创建一个派生自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;
            }
        }
    }
    

    (步骤3)更新AngularJS控制器使其看起来像这样

        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-size,可以上传最大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>