无法使用 Angular 获取 Struts 2 文件选择器的输入值

Question

我正在使用 Angular，我想访问文件输入字段的文件名属性并将其显示在另一个输入框中。

这是文件上传字段：

<div class="btn btn-orange btn-file col-sm-3" >
     <s:text name="expedientes.btn.seleccionar.fichero" /> 
     <s:file name="form.filesUpload" multiple="multiple" ng-model="filesUploadModel" id="filesUploadId"/>
</div>

以及显示文件名的输入框：

<input type="text" class="form-control"         
      id="fileNameId"               name="fileName"                          
      ng-model="fileNameModel"      ng-disabled="true"                       
      ng-init=""                    ng-bind="fileNameModel = filesUploadModel">

但是 ng-bind 不工作。

我还尝试为文件输入字段定义 $watch，如下所示：

$scope.$watch(function() {
            $scope.files = angular.element(document.querySelector('#filesUploadId'));
            return files;
            },
              function(newValue, oldValue) {
            $("#fileNameId").val(files.files[0].name);
            });

观察<input type="file" id="filesUploadId">是否改变，select这个元素和return它作为files，让id为fileNameId的元素' s 值等于 files.files[0].name，因为文件上传输入有一个名为 files 的属性，其中包含我上传的所有文件及其文件名 files[i].name。

但是FF告诉我files is undefined也没有用。没用。

我是不是做错了什么？请帮助并感谢！！

编辑：我正在使用这个并且没有错误，但也没有结果：

if (!angular.equals(document.getElementById("filesUploadId"), null)) {
$scope.$watch(function() {
           var myFiles  = document.getElementById("filesUploadId");
            return myFiles;
            },
              function(newValue, oldValue) {
            $( "#fileNameId" ).val(function(){
                var result = null;
                $(myFiles).each(function(){
                    result = name + this.attr(files).attr(name);
                });
                return result;
                    });
               });
      }

Answer 1

我用 pure JavaScript 解决了它，在这里受到另一个问题的启发： AngularJs: How to check for changes in file input fields?

实际上，当我想调用的函数被包装在angular模块中时，我发现无法使用onchange()，除了上面答案中的方式：

onchange="angular.element(this).scope().setFileName()"

并且在我的脚本中我只使用纯 JavaScript，除了函数的定义：

angular.module('es.redfinanciera.app').controller('PanelMandarCorreoCtrl', function ($scope, $modalInstance) {

....(other functions)

$scope.setFileName = function() {
    var result = "";
       var adjuntos = document.getElementById("filesUploadId").files;
       for (i = 0; i < adjuntos.length; i++){
           result = result + adjuntos[i].name + "\r\n";
           };
    document.getElementById("fileNameId").value = result;
}

}
$scope.btnClean = function() {
    document.getElementById("filesUploadId").value = "";
    document.getElementById("fileNameId").value = "";
};

在我的 jsp 页面中，我终于有了文件上传按钮和一个干净的按钮，如下所示：

<div class="btn btn-orange btn-file col-sm-3" >
    <s:text name="expedientes.btn.seleccionar.fichero" /> 
    <s:file name="correoForm.filesUpload" id="filesUploadId" multiple="multiple" ng-model="filesUploadModel" 
            onchange="angular.element(this).scope().setFileName()"/>
</div>
<div class="col-sm-2">
    <button class="btn btn-default btn-normal" type="button"     ng-click="btnClean()">
        <s:text name="expedientes.btn.quitar.fichero" />
    </button>
</div>

我有一个<textarea>来显示所有的文件名：

<textarea class="form-control"   ng-model="fileNameModel"
          name="fileName"        id="fileNameId"
          ng-disabled="true"></textarea>

编辑： 清除按钮在 IE8 中不起作用，因为在 IE8 中不允许将 "" 值设置为文件输入字段。我的猜测是，我可以删除这个文件输入字段并复制一个新的，具有相同的样式但没有文件被 selected。但是我发现了一个很好的问题，这里有很多答案：

clearing-input-type-file-using-jquery

另外听说在IE8中如果只select一个文件不会触发onchange()事件，必须在select一个文件后加上this.blur() .关于这个问题，IE是严格按照规范来的，而FF不是。但在我的例子中，事件实际上被触发了。可能是因为我正在使用开发工具的 IE8 模拟器在 IE 11 下进行测试。

无法使用 Angular 获取 Struts 2 文件选择器的输入值

cannot get input value of Struts 2 file selector with Angular

jsp

struts2

angularjs