更改語言輸入類型=文件

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，需要在標簽標簽中使用 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

嘗試將其添加到輸入中：

"class="filestyle" data-input="false" data-buttonName="btn-primary" data-buttonText="Hello there, pick your files"