js针对img类型的文件上传实例

<!--accept限制上传图片的类型格式是：image/*,或text/*  multiple是多选设置-->
<input type="file"  multiple  accept="image/*" id="uploadInp">
<!--将选择的图片做一个缩略图-->
<img src="" alt="" id="abbreImg">

<script>
    let uploadInp=document.querySelector('#uploadInp');
    let abbreImg=document.querySelector('#abbreImg');
    uploadInp.onchange=function () {
        console.log(this.files);
    //    属性有name,size,type
        let self=this,
            file=self.files[0];

        if(!file)return;
        //判断上传的图片不能大于多少k
        // if(file.size>1024){
        //     alert('上传图片必须在1kb以内');
        //     return;
        // }
        //用正则写的话判断是否上传某种格式
        if(!/(jpg|jpeg|gif|png)/.test(file.type)){
            alert('必须上传图片');
        }
        //判断是否上传某种格式
        // if(!file.type.includes('image')){
        //     alert('必须上传图片');
        // }
        // FileReader文件读取类
        let reader=new FileReader;
        //读取成base64格式的图片
        reader.readAsDataURL(file);
        //异步读取
        reader.onload=function(ev){
            //读取出的base64，赋给img的src地址
            console.log(ev.target.result);
            abbreImg.src=ev.target.result;
        };
    }
</script>