javascript - 使用input多个文件上传，怎么获取选择的文件？并把这些文件放在页面上显示

Question

{代码...} 使用multiple可以多个文件选择.但是怎么获致到这些文件的文件名，大小等这些信息，并把它们显示在页面上？ 谢谢高手。

PHP中文网 · Answer





    
    Document

黄舟 · Answer

可以试试Web Uploader

PHP中文网 · Answer

document.querySelector('input[type="file"]').files可以获取到Filelist对象，每个File对象包括了一些文件的基本信息，信息能够拿到，怎么显示就看你自己怎么处理了。

大家讲道理 · Answer

getFile(){
        //获取文件集
        let test = document.querySelector('input[type="file"]').files;

        let str = [];

        if(test){
            let img = document.getElementById('img');
            for(let i = 0, len = test.length;i< len;i++){
                    console.log(test[i]);
                str.push(
                            
                            名称: {test[i].name}    大小：{(test[i].size/1024).toFixed(1)} KB
                        );
                console.log(str);
            }
        }
        this.setState({
            str: str
        });

    }

const addBtn = (
            
                
                
{this.state.str}
            
        );

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼