javascript htmlFor用于输入文件标签显示

jtoj6r0c 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(93)

我试图为input type=file设置自定义显示，但是选择id的htmlFor不起作用。
默认情况下，输入类型=文件显示为

Choose file(as button) - no file selected

我尝试将这些名称“选择文件”和“未选择文件”更改为我的自定义显示，我如何才能实现这一点？我尝试使用输入字段的选择ID的htmlFor，但没有工作。我尝试使用标签属性，但文本被放置在“选择文件”按钮的顶部。
以下是我目前的试用版：

<label className="form-label" htmlFor='input-file'> select.....</label>
                        <input
                             className="form-control form-control-lg form-control-solid"
                             type="file"
                             id="input-file"
                             name="thumbnailImg"
                             value={undefined}
                             onChange={(e) => file_choosen(e)}
                           />

输出如下所示：

select...
[Choose File] [no file selected]

我尝试展示的内容如下：

[select...] [***custom no file selected here***]

JavaScript

来源：https://stackoverflow.com/questions/75202279/htmlfor-for-input-files-label-display

1条答案

按热度按时间

7cwmlq891#

如果不希望使用默认输入元素，则需要：
1.隐藏输入元素
1.使用可根据需要设置样式的按钮
1.点击后触发输入文件点击

import { useRef, useState } from "react";

export default function App() {
  const ref = useRef();
  const [file, setFile] = useState(null);

  function file_chosen() {
    setFile(ref.current.files[0]);
  }
  return (
    <div>
      <div style={{ display: "flex", flexDirection: "row", gap: 4 }}>
        <button onClick={() => ref.current.click()}>Select file</button>
        <p>{file === null ? "No file chosen" : "1 file selected"}</p>
      </div>
      <input
        onChange={file_chosen}
        ref={ref}
        type="file"
        style={{ display: "none" }}
      />
    </div>
  );
}

codesandbox example

赞(0）回复(0）举报 2023-01-24

我来回答

javascript htmlFor用于输入文件标签显示

1条答案

相关问题

热门标签

最新问答