在使用图像作为输入文件的输入类型文件中显示图像文件名

Posted 2023-03-06

【中文标题】在使用图像作为输入文件的输入类型文件中显示图像文件名

【英文标题】：showing the image file name in a input type file using image as a input file

【发布时间】：2020-04-17 14:52:40

【问题描述】：

我用图像替换了输入类型 =“文件”“选择文件”按钮。我有什么办法可以在上传图像时显示图像名称。与 css 一样，图像名称保持为空.如何在用图像替换“选择文件”时显示图像名称。这是我的代码：

                 <div>upload  file.</div>

                                <div className="image-upload">
                                    <label htmlFor="file-input">
                                        <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png"/>
                                    </label>

                                    <input id="file-input" type="file"/>
                                </div>
                                `
                              .image-upload > input
                            
                               display: none;
                             

                            .image-upload img
                            
                            width: 80px;
                            cursor: pointer;
                            `

【参考方案1】：

import React,  useState  from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function getFileName(fName)  
  const lastDot = fName.split('\\');
  return lastDot[lastDot.length-1];


function App() 
  const [fileName, setFileName] = useState();

  return (
    <div className="App">
        <div>fileName</div>

           <div className="image-upload">
              <label htmlFor="file-input">
                 <img  src="https://cdn3.vectorstock.com/i/1000x1000/75/97/click-hand-black-simple-icon-vector-7317597.jpg"/>
              </label>   
              <input id="file-input" type="file" onChange=(e)=> setFileName(getFileName(e.target.value))   />
          </div>   
    </div>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

style.css

.App 
  font-family: sans-serif;
  text-align: center;


.image-upload > input
  display: none;


.image-upload img
  width: 80px;
  cursor: pointer;