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">是否已更改，请选择此元素并将其作为files返回，并让ID为fileNameId的元素的值等于{{1因为文件上传输入有一个名为files.files[0].name的属性，其中包含我上传的所有文件及其文件名files。

但FF告诉我files[i].name并没有用。它没有用。

我在这里做错了吗？请帮忙，谢谢!!

编辑：我使用的是没有错误，但没有结果：

files is undefined

Answer 1

我用纯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中不允许将""值设置为文件输入字段。我的猜测是，我可以删除此文件输入字段并复制一个新文件，具有相同的样式但没有选择文件。但我发现了一个很好的问题，在这里有大量的答案：

clearing-input-type-file-using-jquery

另外，我听说如果你只选择一个文件，在IE8 onchange()事件中不会被触发，你必须在选择文件后添加this.blur()。关于这个问题，IE严格遵循规范，但FF不是。但在我的情况下，事件实际上是触发的。也许是因为我在IE 11下使用开发工具的IE8模拟器进行测试。

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

1 个答案: