以下是代碼，因此單擊按鈕時，Windows 資源管理器必須打開，并且從 Windows 資源管理器中選擇了檔案。需要在輸入中顯示。檔案型別不應為“檔案”
<Grid.Column width={8}>
<Input placeholder='File Name - (自動從檔案中提取)'fluid style={{marginBottom:'15px'}}/> </Grid.Column>
uj5u.com熱心網友回復：
您可以使用檔案輸入并將其放置在按鈕標簽中，您可以根據需要自定義該標簽。在檔案輸入上放置一個參考。當您點擊按鈕時，您就可以呼叫檔案輸入的 click() 方法，該方法將打開檔案資源管理器。您可以使用files檔案輸入的屬性選擇檔案并將其設定為變數。
export default function App() {
const fileRef = React.useRef();
let [file, setFile] = React.useState();
const handleChange = (event) => {
setFile(event.target.files[0]);
};
return (
<div>
<button onClick={() => fileRef.current.click()}>
<input id="upload" name="upload" type="file" ref={fileRef} hidden
onChange={handleChange} />
Upload File
</button>
{ file && file!==undefined && file!==null &&
<div>
<p>{file.name}</p>
<p>{file.size}</p>
<p>{file.type}</p>
</div>
}
</div>
);
}
查看此鏈接以了解您可以訪問的更多檔案屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357354.html
標籤：javascript 反应 下一个.js