angularjs-ng-file-upload不將模型綁定到動態創建的HTML表單

Question

我想使用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的情況下，有什么方法可以將文件對象分配給input [type = file]？

在這里創建代碼PLUNKER

http://plnkr.co/edit/S7hnVJnuDjWUMQ6PYewk?p=preview

Answer 1

是的，有一種方法可以將輸入type = 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 = file進入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＃控制器，它接受包含課程章節和部分，圖像二進制文件和視頻，文本的整個JSON和html轉換成一個復雜的類，該類又將信息存儲到數據庫模式中。