使用 WebService 上传文件
ng-file-upload with WebService
我正在尝试添加将 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 方法从未执行。
这可能很简单,但我做错了什么?有没有更好或更简单的方法来做到这一点?
谢谢。
我最终没有尝试使用现有的 WebHandler,而是添加了一个专门用于上传的 IHttpHandler。我不想添加不同的处理程序,但无论如何都行。
ng-upload-file (ng-file-upload .NET example) 引用了一个示例,但让我总结一下我所做的。
- 在我的项目中添加了一个 'Generic Handler',并将其命名为 UploadHandler。
- 调整 ProcessRequest 方法以执行我想要的操作
- 更新了 AngularJS 控制器以发送到新的处理程序
- 更新了 HTML 以允许大文件
- 调整 web.config 文件以允许上传大文件
(第 1 步和第 2 步)将通用处理程序添加到项目中会创建一个从 IHttpHandler 派生的 class,它看起来像这样
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>
我正在尝试添加将 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 方法从未执行。
这可能很简单,但我做错了什么?有没有更好或更简单的方法来做到这一点?
谢谢。
我最终没有尝试使用现有的 WebHandler,而是添加了一个专门用于上传的 IHttpHandler。我不想添加不同的处理程序,但无论如何都行。
ng-upload-file (ng-file-upload .NET example) 引用了一个示例,但让我总结一下我所做的。
- 在我的项目中添加了一个 'Generic Handler',并将其命名为 UploadHandler。
- 调整 ProcessRequest 方法以执行我想要的操作
- 更新了 AngularJS 控制器以发送到新的处理程序
- 更新了 HTML 以允许大文件
- 调整 web.config 文件以允许上传大文件
(第 1 步和第 2 步)将通用处理程序添加到项目中会创建一个从 IHttpHandler 派生的 class,它看起来像这样
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>