Question

我有一个上传文件控件，可以将文件数据上传到MVC控制器。我还想在同一个请求中发送额外的上传详细信息模型对象。

但是对于文件 - 上传请求内容类型未定义对我有用。但是要使MVC控制器有效地接收模型数据，它必须是 application / json。我如何在单个请求中执行此操作？

或者，我还能采取其他方法吗？请建议。要完成上传，我需要将数据发送到服务器。

我正在做的是

var formdata;
$scope.getTheFiles = function ($files) {
    formdata = new FormData();
    angular.forEach($files, function (value, key) {
        formdata.append(key, value);
    });

和

$scope.validateFiles = function () {

    var params = UploadDataServices.getGroupMembershipUploadParams();

    $scope.pleaseWait = { "display": "block" };

    var request = {
        method: 'POST',
        url: BasePath + 'uploadNative/ValidateFiles/',
        data: formdata,
        headers: {
            'Content-Type': undefined
        }
    };

    // SEND THE FILES.
    console.log(formdata);

    if (formdata != null || formdata != undefined) {
        $http(request)

在MVC控制器中，我将文件数据作为

System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;

现在我想在我收到的请求中发送 params

var params = UploadDataServices.getGroupMembershipUploadParams();

我该怎么做？我试着做了

    var request = {
        method: 'POST',
        url: BasePath + 'uploadNative/ValidateFiles/',
        data: {formdata:formdata,arg:params},
        headers: {
            'Content-Type': undefined
        }
    };

但我无法访问文件数据。

请建议一种方式。

提前致谢。

Answer 1

通过这种方式，您可以上传多个文件以及一些属性。

要使用formdata发送多个文件/记录，您需要在密钥上使用索引，例如[0].someKey即formdata.append('[' + i + '].' + key, value);但如果您只想发送一条记录，则可以删除索引并将密钥直接传递给追加函数。

当用户点击＆＃34;添加文件＆＃34;按钮，然后将新行添加到表中，用户可以通过单击文件控件来选择文件，并且该指令将File对象设置到控制器的范围。当＆＃34; Save＆＃34;单击按钮我循环遍历所有文件及其属性，并将它们附加到FormData对象，并使用配置对象和FormData对象将其发布到控制器。

模特。

public class FileModel
{
    public int Id { get; set; }

    public string Name { get; set; }

    public HttpPostedFileBase Attachment { get; set; } // The HttpPostedFileBase provides access to files uploaded by the client.
}

MVC控制器上的Action方法

[HttpPost]
public JsonResult SaveFiles(List<FileModel> files)
{
    // Your logic here.
}

观点。

<form role="form" ng-submit="saveFiles()">
    <div class="form-group">
        <table class="table table-bordered table-striped table-responsive">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>File</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-hide="files.length">
                    <td colspan="2">No records to display.</td>
                </tr>

                <tr ng-repeat="file in files">
                    <td>
                        <input type="text" class="form-control" ng-model="file.Name" />
                    </td>
                    <td>
                        <input type="file" class="form-control" file-model="file.Attachment" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-xs-12">
        <div class="col-xs-6">
            <button type="button" class="btn btn-info btn-sm" ng-click="addFile()">Add File</button>
        </div>
        <div class="col-xs-6">
            <button type="submit" class="btn btn-info btn-sm">Save</button>
            <button type="button" class="btn btn-info btn-sm" ng-click="cancelSaveFiles()">Cancel</button>
        </div>
    </div>
</form>

AngularJS控制器。

var app = angular.module('example', []);

app.controller('FilesController', function ($scope) {
    $scope.files = [];
    $scope.saveFiles = saveFiles; // saveFiles func given below.
});

<input type="file" />的AngularJS指令。

app.directive('fileModel', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;

                element.bind('change', function () {
                    scope.$apply(function () {
                        modelSetter(scope, element[0].files[0]); // sets the file object on the model property.
                    });
                });

                scope.$watch(model, function (newValue, oldValue) {
                if (newValue === null || newValue === undefined || newValue === '') {
                    angular.element(element).val(''); // clears the file from the input element if the model is cleared.
                }
            });
        }
    };
});

AJAX电话。

function saveFiles() {
            if (angular.isArray($scope.files) && $scope.files.length > 0) {
                var formdata = new FormData();

                for (var i = 0; i < $scope.files.length; i++) {
                    for (var key in $scope.files[i]) {
                        var value = $scope.files[i][key];    
                        formdata.append('[' + i + '].' + key, value);
                    }
                }

                var config = {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }                        
                };

                $http.post('/Area/Controller/SaveFiles', formdata, config)
                    .success(saveFilesCompleted);

                function saveFilesCompleted(data) {
                    // call back
                }
            }
        }

将多部分表单和JSON数据从Angular JS发送到MVC

1 个答案: