图片上传预览

在网上看到很多的图片上传后就可以预览的效果，今天找个空来试一下，虽然有点小BUG，先记下了

页面标签

图片上传需要用到这个文件上传组件，参照了网上的一些思路，在外层套一个标签，里面再放一个图片标签，组合后就成了下面这种结构

放了一个占位图片picture.png，用于显示未上传前的效果。并限定文件类型只能上传图片格式

样式调整

修改标签样式，让图片居中显示，隐藏掉input

.img-item{
    width: 180px;
    height: 300px;
    line-height: 300px;
    float: left;
    border: 1px solid LightGrey;
    text-align: center;
    cursor: pointer;
}
.img-item>img{
    max-width: 180px;   /*设置图片的最大显示宽度不超过限定值*/
    max-height: 300px;  /*设置图片的最大显示高度*/
}
.img-item>input{
    display: none;  /*隐藏file控件*/
}

处理事件

隐藏掉input后，需要激活文件上传操作，设定点击div时激活文件控件的单击，将代码做了下面的调整

对应的js方法如下

function clickImgItem(obj){
    //模拟文件控件的单击，激活文件上传功能
    obj.children[1].click();
}

在选中图片后，需要将图片加载到img标签中，需要处理input中的数据改变事件，添加一个方法showPic()

添加js方法如下

function showPic(picfile) {
    //通过picfile对象获取img对象
    let img = picfile.parentNode.firstElementChild;
    let reads = new FileReader();
    if(picfile.files.length>0){
        reads.readAsDataURL(picfile.files[0]);
        reads.onload = function(e) {
            //修改图片的src为选定的文件
            img.src = this.result;
        };
    }
}

添加length>0是为了处理用户在没有选择图片就退出的情况，也可以使用picfile.files[0]!=null来进行判断。

最终代码及效果

demo代码

    
    
    
    
    


    
图片上传
    

        
        
    
    

未选择图片

已选择上传图片

小结

基本的效果已实现，还有需要改进的一些功能

选择图片后，仅限定了最大显示尺寸，为了不超出区域，如果图片与控件比例不一致，会出现留白

在处理居中的时候用了一个行高，处理起来简单，但最后的效果有点偏上，没再继续折腾这个BUG了，有知道这个问题的小伙伴欢迎留言