angularjs - 如何使用angularjs和MVC3以相同的功能从两个不同的html文件上传中保存两个文件

Question

这是我的所有代码，我试图分别上传小图像和大图像，但 angularjs 不允许我这样做，它只获取一个文件而不获取另一个文件。请任何人帮助解决这个问题。提前致谢。

<div ng-app="eventModule" >
<div ng-controller="eventController">
<div>
<span >Thumbnail Image</span>
<input type="file" id="fileToUpload" onchange="angular.element(this).scope().selectThumbnail(this.files)"  accept="image/*"  />
</div>
<div>
<span >Large Image</span>
<input type="file" onchange="angular.element(this).scope().selectLargeImage(this.files)" class="LargeImageSubCategory" />
</div>
</div>
<span  data-ng-click="SaveFile()">Submit</span>
</div>

<script>
    var eventModule = angular.module('eventModule', []);
    eventModule.controller('eventController', function ($scope,ArticleService, $http, $sce) {
        $scope.selectThumbnail = function (file) {
            $scope.SelectedThumbnail = file[0];
        }

        $scope.selectLargeImage = function (file) {
            $scope.SelectedLargeImage = file[0];
        }

        $scope.SaveFile = function () {
            $scope.IsFormSubmitted = true;
            $scope.Message = "";
            ArticleService.UploadFile($scope.SelectedThumbnail, $scope.SelectedLargeImage).then(function (d) {
                alert(d.Message);
                ClearForm();
            }, function (e) {
                alert(e);
            });
         };
    });
    eventModule.service("ArticleService", function ($http, $q) {
        this.UploadFile = function (Thumbnail, LargeImage, TitleHeading, Topic, SmallDesc, LargeDesc) {
            var formData = new FormData();
            formData.append("Thumbnail", Thumbnail);
            formData.append("LargeImage", LargeImage);
            // here when i am trying to send two files so controller is not called
            //and function is breaking and alert is comming "File Upload Failed"
            formData.append("TitleHeading", TitleHeading);
            formData.append("Topic", Topic);
            var defer = $q.defer();
            $http.post("/Articles/SaveFiles", formData,
            {
               withCredentials: true,
               headers: { 'Content-Type': undefined },
               transformRequest: angular.identity
            }).success(function (d) {
               defer.resolve(d);
            }).error(function () {
               defer.reject("File Upload Failed!");
            });
            return defer.promise;
         }
    });
</script>

//And My ArticlesController.cs code is

[HttpPost]
public JsonResult SaveFiles(string TitleHeading, string Topic)
{
string Message, fileName, actualFileName;
Message = fileName = actualFileName = string.Empty;
bool flag = false;
if (Request.Files != null)
{
var file = Request.Files[0];
actualFileName = file.FileName;
fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
int size = file.ContentLength;
try
{
file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), fileName));
using (TCDataClassesDataContext dc = new TCDataClassesDataContext())
{
Article insert = new Article();
insert.ArticleId = Guid.NewGuid();
insert.TitleHeading = TitleHeading;
insert.SmallImagePath = fileName;
dc.Articles.InsertOnSubmit(insert);
dc.SubmitChanges();
Message = "File uploaded successfully";
flag = true;
}
}
catch (Exception)
{
Message = "File upload failed! Please try again";
}}
return new JsonResult { Data = new { Message = Message, Status = flag } };
}

Answer 1

您将文件附加到 formdata，因此您需要指定 Thumbnail 和 LargeImage 作为 MVC Controller 的参数。请看下面:

    [HttpPost]
    public JsonResult SaveFiles(
          HttpPostedFileBase thumbnail
        , HttpPostedFileBase largeImage
        , string titleHeading
        , string topic)
    {
        string Message, fileName, actualFileName;
        Message = fileName = actualFileName = string.Empty;
        bool flag = false;

        if (thumbnail != null && thumbnail.ContentLength != 0) 
        {
            SaveFile(thumbnail);
        }

        if (largeImage != null && largeImage.ContentLength != 0)
        {
            SaveFile(largeImage);
        }

        return new JsonResult { Data = new { Message = Message, Status = flag } };
    }

    private void SaveFile(
        HttpPostedFileBase httpFile) 
    {
        var actualFileName = httpFile.FileName;
        var fileName = Guid.NewGuid() + Path.GetExtension(httpFile.FileName);
        int size = httpFile.ContentLength;
        try
        {
            httpFile.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), fileName));
            using (TCDataClassesDataContext dc = new TCDataClassesDataContext())
            {
                Article insert = new Article();
                insert.ArticleId = Guid.NewGuid();
                insert.TitleHeading = TitleHeading;
                insert.SmallImagePath = fileName;
                dc.Articles.InsertOnSubmit(insert);
                dc.SubmitChanges();
                Message = "File uploaded successfully";
                flag = true;
            }
        }
        catch (Exception)
        {
            Message = "File upload failed! Please try again";
        }
    }