页面标签

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

<div class="img-item">
    <img src="picture.png"/>
    <input type="file" accept="image/jpg,image/jpeg,image/png">
</div>

放了一个占位图片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时激活文件控件的单击，将代码做了下面的调整

<div class="img-item" onClick="clickImgItem(this)">
    <img src="picture.png"/>
    <input type="file" accept="image/jpg,image/jpeg,image/png">
</div>

对应的js方法如下

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

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

<input type="file" onchange="showPic(this)" accept="image/jpg,image/jpeg,image/png">

添加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代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传预览</title>
    <style>
        .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控件*/
        }
    </style>
</head>
<body>
    <h3>图片上传</h3>
    <div class="img-item" onClick="clickImgItem(this)">
        <img src="picture.png"/>
        <input type="file" onchange="showPic(this)" accept="image/jpg,image/jpeg,image/png">
    </div>
    <script>
        function clickImgItem(obj){
            //模拟文件控件的单击，激活文件上传功能
            obj.children[1].click();
        }

        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;
                };
            }
        }
    </script>
</body>
</html>