2

如何在 asp.mvc 中使用 ng-file-upload 上传文件？

我正在使用此代码在 asp.mvc 中使用 ng-file-upload 上传文件：

public class HomeController : Controller, IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            bool result;
            try
            {
                HttpPostedFile file = context.Request.Files[0];
                if (file.ContentLength > 0)
                {
                    string nameFile = Guid.NewGuid().ToString("N") + Path.GetExtension(file.FileName);
                    var path = Path.Combine(Server.MapPath(Url.Content("~/Temp/")), nameFile);
                    file.SaveAs(path);    
                }
                result = true;
            }
            catch (Exception exception)
            {
                result = false;
            }
            context.Response.Write(result);
        }

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

脚本 ：

 $scope.$watch('file', function (file) {
    if (file&&!file.$error) {
        $scope.upload($scope.file);
    }
});
$scope.upload = function (file) {
    Upload.upload({
        url: getBaseUrl() + 'Home/ProcessRequest',
        file: file
    }).progress(function(evt) {
        $scope.progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + $scope.progressPercentage + '% ' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
        console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
    }).error(function (data, status, headers, config) {
        console.log('error status: ' + status);
    });
};

错误 ：

POST http://localhost:1726/Home/ProcessRequest 500（内部服务器错误）没有为此对象定义无参数构造函数。

编辑 ：

我正在使用这段代码：

   public class HomeController : Controller
    {
        [HttpPost]
        [AllowUploadSpecialFilesOnly(".pdf,.doc,.docx,ppt,pptx,.mp3")]
        public JsonResult Resume(HttpPostedFileBase file)
        {
            bool result;
            try
            {
                if (file != null && file.ContentLength > 0 && file.FileName != null)
                {
                    string nameFile = Guid.NewGuid().ToString("N") + Path.GetExtension(file.FileName);
                    var path = Path.Combine(Server.MapPath(Url.Content("~/Temp/")), nameFile);
                    file.SaveAs(path);
                }
                result = true;
            }
            catch (Exception exception)
            {
                result = false;
            }
            return Json(new
            {
                Result = result
            }, JsonRequestBehavior.AllowGet);
        }
     }

html：

<form class="form-horizontal text-center" role="form" name="upload_form" >
    <div class="form-group">
        <div class="btn btn-primary" ngf-pattern="'.pdf,.doc,.docx,ppt,pptx,.mp3,.apk'" ngf-select ng-model="file">Send</div>
    </div>
    <span class="progress" ng-show="file.progress >= 0">
        <div class="ng-binding" style="width:{{file.progress}}%" ng-bind="file.progress + '%'"></div>
    </span>
</form>

脚本：

  $scope.upload = function (file) {
                Upload.upload({
                    url: getBaseUrl() + 'Home/Resume',
                    file: file
                }).progress(function(evt) {
                    $scope.progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('progress: ' + $scope.progressPercentage + '% ' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                }).error(function (data, status, headers, config) {
                    console.log('error status: ' + status);
                });
            };

这可以。但progressPercentage总是 100% 但文件正在上传

4

1 回答 1

0

这里掌握https://github.com/danialfarid/ng-file-upload 并查看教程http://jsfiddle.net/danialfarid/0mz6ff9o/135/

STEP 0按照上面的教程步骤

STEP 1 修改 index.cshtml 中的 url 参数

url: '@Url.Action("UploadDocument")',

file.upload = Upload.upload({
                  url: '@Url.Action("UploadDocument")',
                  data: {
                     File: file,
                     Description:'test'
                  }
               });

c# 控制器中的第 2 步创建UploadDocument(UploadRq 数据)

 public JsonResult UploadDocument(UploadRq data)
      {

         //your code
         //string filename = Path.GetFileName(data.File.FileName);     
         //data.File.SaveAs(Server.MapPath("~/DocumentUploaded/") + filename);
         return Json("Saved", JsonRequestBehavior.AllowGet);
      }

STEP 3 创建类UploadRq.cs

public class UploadRq
   {
      public HttpPostedFileBase File { get; set; }
      public string Description { get; set; }
   }
于 2018-01-13T16:30:43.470 回答