在ASP.NET MVC 4.0（Angular JS）中使用多个文件控件上载多个图像

Question

我将Visual Studio 2012 Express与Framework 4.5 MVC结合使用。

我也是第一次使用Angular Js。

我有一个包含多个浏览（文件）按钮的视图页面，该按钮将通过与表单数据分别选择每个图像来上传单个图像。

问题是，通过使用提交按钮，我无法获取图像，但是获得了表单数据。

我想使用Angular js获取带有表单数据的图像。

我已经提到了以下帖子，但没有得到解决方案：

链接1

链接2

请任何人帮助我解决这个问题，将不胜感激。

Answer 1

我有一个示例代码，可以使用angularjs上传多个图像。

该链接可能会对您有所帮助： https : //jsfiddle.net/n9tL7cdr/1/

<div ng-app="test">
<div ng-controller="UploadCtrl">
    <table>
        <tr ng-repeat="i in [1, 2, 3, 4]">
            <td>{{i}}</td>
            <td>
                <input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />                           </td>
            <td>
                <img ng-src="{{ image[$index].dataUrl }}" height="50px" />
            </td>
        </tr>
    </table>
</div>

控制器：

angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout) {
// Variable for image. 
$scope.image = {
    dataUrl: []
};

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
    if (files != null) {
        var file = files[0];
        var index = this.$index; // index of image. 
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.image[index] = {dataUrl: e.target.result}; // Retrieve the image. 
                    });
                }
            });
        }
    }
};
});

Answer 2

在这里，我找到了使用HttpPostedFileBase和Form Collection的解决方案。

     public ActionResult AddImageUpload(IEnumerable<HttpPostedFileBase> files,FormCollection fc )
        {
            ImageUpload IU = new ImageUpload();
            IU.MaterialId = Convert.ToInt32((fc["MaterialId"]).Replace("number:",""));
            IU.CategoryId = Convert.ToInt32((fc["CategoryId"]).Replace("number:", "")); 
            string tr = fc["hdnSub"].ToString();
            string result = null;
            string Message, fileName, actualFileName;
            Message = fileName = actualFileName = string.Empty;
            bool flag = false;
            //HttpPostedFileBase f= IU.ImageP;
            string[] SubAssemblyId = (tr.Split(','));
            int i = 0;
            string databaseid = null;
            for (int j=0 ; j<files.Count(); j++)
            {

                var fileContent = Request.Files[j];
                if (fileContent.FileName != "")
                {
                    databaseid = SubAssemblyId[i];
                    string fn = DateTime.Now.ToShortDateString().Replace("/", "") + DateTime.Now.TimeOfDay.Hours + DateTime.Now.TimeOfDay.Minutes + DateTime.Now.TimeOfDay.Seconds + DateTime.Now.TimeOfDay.Milliseconds + Path.GetExtension(fileContent.FileName);
                    fileName = fn;
                    try
                    {
                        if (fileContent != null && fileContent.ContentLength > 0)
                        {
                            var inputStream = fileContent.InputStream;
                            var path = Path.Combine(Server.MapPath("/Images/Product/"), fn);
                            using (var fileStream = System.IO.File.Create(path))
                            {
                                inputStream.CopyTo(fileStream);
                            }

                        }
 }
                    catch (Exception)
                    {

                    }

                }
                i++;

            }
return RedirectToAction("ImageUpload");
        }