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

回答

相關問題