在输入中添加文本[重复]

Question

有一个输入表单（文件类型）：

<input
  name="image"
  id="image-input"
  accept="image/*"
  onChange={this.uploadFile}
  multiple
  type="file"
  className="imgInp"
/>

如何在上面添加文字？我不希望它出现在输入之外，在这种情况下，我会添加一个跨度，例如：<span> Upload image </span> 但我希望文本出现在输入中。

在this page 上，它表示必须添加一个属性value，但如果我将其添加到输入中，则会引发此错误：

InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

<input
  name="image"
  id="image-input"
  accept="image/*"
  onChange={this.uploadFile}
  multiple
  type="file"
  className="imgInp"
  value="Upload image" //this is where value was added
/>

有没有办法让它工作？

Answer 1

那是因为您正在尝试为文件类型输入添加值。如果你对文本类型输入做同样的事情，它会工作得很好。

如果您想更改文件输入的默认文本，那么您将不得不处理一些 js 以及 html。

在这种情况下，此链接可能会有所帮助： Change default text in input type="file"?

Answer 2

“上传图片”

根据您要添加的文本，我相信您要使用的属性是placeholder，而不是value。这将为您提供一个包含所需文本的输入字段。