更改语言输入类型=文件

Question

我正在为我的应用程序使用 spring-mvc，我已经管理了将文件上传到服务器，标签为：

<form:input path="file" type="file" id="file"/>

，但是当我的应用程序更改语言时我遇到了问题，因为这个

input type=file

不会改变语言，我做了很多证明，但我不明白。

有人知道喜欢这样做吗？

为了更改所有标签的语言，我这样做：

<fmt:message key="device.registerFormFile"/>

谢谢。

Answer 1

翻译“选择文件”和“未选择文件”标签是不可能，因为这些是本机浏览器元素并且取决于浏览器的语言。

但是，您可以尝试一些技巧，例如放置图像而不是按钮或使文件输入透明（并在下面添加文本输入）。
浏览这些答案以选择是否有合适的：

如何更改

<input type=“file” />

的按钮文字？
更改

input type=“file”

中的默认文本？

Answer 2

您可以更改页面渲染时创建的 span 元素的内部 html。

示例：

let textFile = document.getElementsByClassName('filename');
textFile[0].innerHTML = "Archivo PDF";
let btnFile = document.getElementsByClassName('action btn bg-blue');
btnFile[0].innerHTML = "Seleccionar";

Answer 3

有类似的需求，想要制作可传输的本机浏览器标签“选择文件”和“未选择文件”。我通过编写下面的代码来实现。

只需要创建一个输入字段，应用样式为display：none，以及一些元素id，这些元素id需要在标签标签中使用，如for =“elementId”

在模板（.html）文件中

<span fxLayout="column">
      <span fxLayout="row">
        <label for="file" class="btn btn-primary btn-block btn-outlined">{{"commonKeysText.chooseFile"
          | translate}}</label>
        <input placeholder="{{translatedPlaceholderText}}" readonly>
      </span>
      <input type="file" style=" width: 100%; display: none;" id="file" name="file"
        (change)="onFileSelect($event)" />
    </span>

在组件（.ts）文件中

fileupload: FormGroup;
translatedPlaceholderText = this.translateService.instant('commonKeysText.noFileChosen');
    this.fileupload = this.fb.group({
          file: ['', [Validators.required]],
    });

onFileSelect(event) {
   let file = event.target.files[0];
   if (event.target.files.length > 0) {
      this.fileupload.get('file').setValue(file);
   } else {
     file = null;
     this.fileupload.get('file').setValue(file);
   }
   this.translatedPlaceholderText= this.fileupload.get('file').value.name;
}

onResetFileSelection() {    
    (<HTMLInputElement>document.getElementById('file')).value = '';
    this.translatedPlaceholderText= this.translateService.instant('commonKeysText.noFileChosen');    
  }

Answer 4

是的，当然你可以改变它！

<input type="file" id="fileInput" accept=".pdf, .docx, .txt">

document.addEventListener("DOMContentLoaded", function() {
var fileInput = document.getElementById('fileInput');
if(fileInput) {
    fileInput.setAttribute('lang', 'fr'); // Set the language attribute to French
    fileInput.setAttribute('title', 'Choisir un fichier'); // Set a French title attribute
    // If you also want to change the button text
    fileInput.addEventListener('change', function() {
        var label = this.nextElementSibling;
        if(label) {
            label.innerHTML = this.files[0].name; // Change the button text to the selected file name
        }
    });
}

});