Jquery 获取图片信息

最新推荐文章于 2024-08-23 08:18:04 发布

原创最新推荐文章于 2024-08-23 08:18:04 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html

记录专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种图片上传功能的实现方式，包括实时预览、格式验证及大小限制。通过JavaScript和FileReader API，确保用户上传的图片为JPG或PNG格式且不超过2MB，同时在页面上即时显示预览效果。

获取图片信息

<input id="photo"  name="logos" type="file" multiple="">

document.getElementById("photo").addEventListener("change",function(e){
//            $(".container").empty();
            var files =this.files;
            if(files.length==0){
                return false;
            }
            
            var types =  extname(files[0]['name']);
            console.log(types);
            if(types != 'jpg' && types != 'png'){
                alert("请上传正确的图片格式（JPG，PNG）");
                return;
            }
            var img = new Image();
            var reader =new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload =function(e){
                var dx =(e.total/1024)/1024;
                if(dx>=2){
                    alert("文件不能大于2M");
                    return;
                }

                img.src =this.result;
                // console.log(this.result);
                // img.style.width ="100%";
                img.style.height ="50px";
                $('#logo').val(this.result);
                if($(".containera").children().length>0){
                    $(".containera").children('img').attr('src',this.result);
                }else{
                    // console.log(img);return;
                    document.querySelector('.containera').appendChild(img);
                   
                    // $('.containera').appendChild(img);
                }

            }
        })


function extname(filename){
  if(!filename||typeof filename!='string'){
     return false
  };
  let a = filename.split('').reverse().join('');
  let b = a.substring(0,a.search(/\./)).split('').reverse().join('');
  return b
};