angularjs - ng-file-upload不绑定模型到动态创建的HTML表单

angularjs - ng-file-upload not binding model to dynamically created HTML form

本文关键字：创建 动态 HTML 表单 模型 ng-file-upload 绑定 angularjs      更新时间：2023-09-26

我想使用ng-repeat从动态生成的HTML表单上传图像文件。我使用ng-file-upload模块上传单个图像文件(https://github.com/danialfarid/ng-file-upload)。当我从静态HTML上传文件，它的工作很好。但是当我尝试从动态生成的HTML上传文件，然后它不会像预期的那样工作。文件没有上传，并且在firefox控制台出现错误，如下所示:

Error: Argument 2 of FormData.append is not an object.

如果我们将文件控制集的ng-model赋值为null，则表单成功提交。例如;如果

<input name='img' type='file' value='' ng-model='data.imageFile' 'ngf-select' accept='image/*' />

和

$scope.data.imageFile = null;

则其他参数将由HTTP服务提交并正常存储到数据库中，但文件不会上传。

在动态生成HTML的情况下，是否有任何方法将文件对象分配给输入[type=file] ?

代码PLUNKER在这里创建

http://plnkr.co/edit/S7hnVJnuDjWUMQ6PYewk?p =预览

是的，有一种方法可以将输入类型=file分配给动态生成的html。不仅在页面加载时动态生成，而且在通过angular添加新的输入type=file时也会动态生成。我刚这么做了，而且成功了!!我很兴奋，我把所有的技巧都贴在这里。我所要求的回报是，当你在你的解决方案中得到它时，请投票。现在问题和答案都在0点，但我可以证明这是一个有效的解。

     <input type="file" class="form form-control" placeholder="Section Image" file-model2="fileUploadFile2[getImageIndex(c.ChapterNbr, $index)][$index]" />

请注意，我们有一个二维数组，这个input=文件在ng-repeat的ng-repeat中，当用户按下+Add按钮时动态添加。

，在getImageIndex:

中
        var chIndex = 0;
        var sIndex = 0;
        $scope.getImageIndex = function (chNbr, sectionNbr) {
            for (var i = 0; i < $scope.chapters.length; i++) {
                if ($scope.chapters[i].ChapterNbr == chNbr) {
                    chIndex = i;
                    sIndex = sectionNbr;
                    return i;
                };
            };
        };

这纯粹是为了获取索引(第一维和第二维，具体到我的设置)。我使用指令张贴在StackOverflow的某个地方，我很感激，实际上得到文件字节和信息，它是这样的:

       .directive('fileModel2', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('change', function (e) {
                    $parse(attrs.fileModel2)
                    .assign(scope, element[0].files[0]);
                    scope.$apply();
                    scope.getFile2(scope.$eval(attrs.indexNumber));
                });
            }
        };
    }])
    .factory('fileReaderFactory', function ($q, $log) {
        return {
            onLoad: function (reader, deferred, scope) {
                return function () {
                    scope.$apply(function () {
                        deferred.resolve(reader.result);
                    });
                };
            },
            onError: function (reader, deferred, scope) {
                return function () {
                    scope.$apply(function () {
                        deferred.reject(reader.result);
                    });
                };
            },
            onProgress: function (reader, scope) {
                return function (event) {
                    scope.$broadcast("fileProgress",
                        {
                            total: event.total,
                            loaded: event.loaded
                        });
                };
            },
            getReader: function (deferred, scope) {
                var reader = new FileReader();
                reader.onload = this.onLoad(reader, deferred, scope);
                reader.onerror = this.onError(reader, deferred, scope);
                reader.onprogress = this.onProgress(reader, scope);
                return reader;
            },
            readAsDataURL: function (file, scope) {
                var deferred = $q.defer();
                var reader = this.getReader(deferred, scope);
                reader.readAsDataURL(file);
                return deferred.promise;
            }
        }
    }
    );

指令触发getFile2，它执行Filereader在预览图像之前读取字节。最后，预览图像:

         $scope.getFile2 = function () {
            console.log($scope.fileUploadFile2[chIndex][sIndex]);
            if ($scope.fileUploadFile2[chIndex][sIndex]) {
                fileReaderFactory.readAsDataURL($scope.fileUploadFile2[chIndex][sIndex], $scope)
                    .then(function (result) {
                        $scope.chapters[chIndex].Sections[sIndex].sectionImgPreview = result;
                    });
            }
        };
下面是预览图像的HTML: 
     <img ng-if="s.sectionImgPreview" class="img-responsive" ng-src="{{s.sectionImgPreview}}" alt="" onerror="this.src='@Url.Content("~/Content/Images/ToyApp.png")';" />

此时，$scope。fileUploadFile2[chIndex][sIndex]准备发布到后端，在我的情况下，这是一个c#控制器，接受包含课程章节和部分，图像二进制文件和视频，文本和html的整个JSON，进入一个复杂的类，将反过来存储信息到数据库模式

相关文章：