อินพุตไฟล์และการอ่านข้อมูลไฟล์

ยินดีต้อนรับ

องค์ประกอบช่องกรอกไฟล์

function FileInput() {
  const handleChange = (e) => {
    const file = e.target.files[0];
    console.log(file.name, file.size, file.type);
  };
  return <input type="file" onChange={handleChange} />;
}

คุณสมบัติของออบเจ็กต์ไฟล์

การยอมรับประเภทไฟล์เฉพาะ

<input type="file" accept="image/png,image/jpeg,.pdf" />

การเลือกไฟล์หลายไฟล์

<input type="file" multiple />

const files = Array.from(e.target.files);

การแสดงตัวอย่างรูปภาพด้วย URL.createObjectURL

const [preview, setPreview] = useState(null);

const handleChange = (e) => {
  const file = e.target.files[0];
  if (file) setPreview(URL.createObjectURL(file));
};

useEffect(() => {
  return () => { if (preview) URL.revokeObjectURL(preview); };
}, [preview]);

{preview && <img src={preview} alt="Preview" />}

การอ่านเนื้อหาไฟล์ด้วย FileReader

const reader = new FileReader();
reader.onload = (e) => setContent(e.target.result);
reader.readAsText(file);

การตรวจสอบขนาดไฟล์

const MAX_SIZE = 5 * 1024 * 1024; // 5 MB
if (file.size > MAX_SIZE) {
  setError('File must be under 5 MB');
  return;
}

การล้างช่องกรอกไฟล์

const inputRef = useRef();
const clear = () => { inputRef.current.value = ''; };
<input ref={inputRef} type="file" />

การเก็บรีเฟอเรนซ์ไฟล์ในสถานะ

const [file, setFile] = useState(null);
const handleChange = (e) => setFile(e.target.files[0] || null);

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สรุปทบทวน

ถัดไป