js input文件上传

(1)设置类型type='file'
	属性:
		accept='格式1,格式2'  前台筛选文件格式
			允许所有图片格式:"image/*"
		multiple  多选
		value    获取第一个文件名或清空
	 
(2)若要模拟用户点击
	input对象.click()
	
	
(3)监听上传文件
	onchange=(e)=>{
		(1)获取上传文件信息
			方式一:e.target.files
			方式二:input节点.files
			
			files中的每个file属性:
		     name: 文件名,
             lastModified: 时间戳,
             lastModifiedDate:Tue Oct 15 2019 12:43:01 GMT+0800 (中国标准时间)形式的最后修改时间.
             size: 文件的字节大小,
             type: 文件类型
				
		(2)获取文件名:
			方式一:通过(1)中的方式获取到file对象,file.name
			方式二:input节点.value; 获取到的始终是第一个文件的绝对路径

	}
	
(4)使用FileReader监听文件上传预览
	
(5)若要上传多个文件input添加属性
	multiple="multiple"
	
(6)限制上传文件个数
	回调中做判断
	
(7)清空选择列表
	input节点.value=null/[];
	
(8)上传预览展示图标(文件、图片等)
	根据获得的文件的type属性,文本等通过不同字体图标文件来展示,图片可直接通过fileReader转换结果呈现
	
(9)accept属性

代码示例:

import React, { useState,useCallback,useRef,useEffect } from 'react';
import PropTypes from 'prop-types'
import './upload.css';

function App(props){
  
    // const [arr,setArr] = useState([]);
    const inputf = useRef(null);
    const { disabled } = props;

    const _onClick = useCallback(() => {
        inputf.current.click();


    }, [])
    
    const _onChange = useCallback((ev) => {
        let arr = [];
        let files = ev.target.files;
        Object.keys(files).forEach((item, index) => {
            let fileReader = new FileReader();
            
            fileReader.readAsDataURL(files[item]);
            fileReader.onload = function (e)
            {
                arr.push({url:e.target.result,type:files[item].type,size:files[item].size,fileName:files[item].name});
                
                if (arr.length==Object.keys(files).length)
                {
                    props.onLoad(arr);
                }
            }  
            
        })

 


    },[])

    return(

        <div className={`jf-upload-container ${!disabled&&'jf-upload-container-notDisabled'}`}>
            <input  multiple ref={inputf} onChange={_onChange} type="file" className='je-upload-file' />
            <i onClick={_onClick} className='iconfont icon-hao jf-upload-icon'>
                
            </i>
        </div>
    )
}

App.propTypes = {
    disabled: PropTypes.bool,
    onLoad:PropTypes.func
}

App.defaultProps = {
    onLoad:()=>{}
}


export default React.memo(App);