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

【问题标题】：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;
                            }`}

【问题讨论】：

标签： css reactjs image file button

【解决方案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 alt="a" 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;
}

【讨论】：