图片上传之在线预览

前端入坑纪 11

最近这几天一直在折腾这个在线预览图片的功能，关键是项目要求可以由用户创建多个上传图片的按钮，每个按钮代表一个上传控件。可能是我想复杂了，或者本身功力不到家。总之，做得自己都快呕血了。

俗话说，功夫不负有心人。最终还是搞出来了，现在单单精简一个，来给大家展示下效果。说真的，单单做一个，还TM简单啊！真是没有对比没有伤害～

OK，first things first！项目链接

HTML 结构

    <div class="imgView">
        <a href="javascript:;">chang</a>
        <a href="javascript:;">close</a>
        <img src="" alt="">
    </div>
    <!--由于这里的input会被重新创建，所以事件要写在里面才会有效-->
    <lable class="upBtn">
        添加图片
        <input type="file" accept="image/*" onchange="imgChange()" hidden="hidden" />
    </lable>

网页结构简单来说，一个是用来预览图片的imgView，一个是点击用的按钮upBtn，两个a包含在预览里面的功能按钮。

Css 结构

        .imgView {
            display: none;
            border: 1px dashed #ccc;
            border-radius: 5px;
            min-height: 50px;
            position: releative:
        }
        
        .imgView>img {
            width: 100%;
        }
        
        .imgView>a {
            text-decoration: none;
            color: #333;
            background: #ccc;
            display: block;
            line-height: 35px;
            position: absolute;
            top: 15px;
            right: 15px;
            text-align: center;
            font-size: 10px;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            font-size-adjust: none;
        }
        
        .imgView>a:first-child {
            right: 66px;
        }
        
        .upBtn {
            display: block;
            width: 100%;
            height: 38px;
            line-height: 38px;
            border-radius: 5px;
            border: 1px solid #ccc;
            text-align: center;
            color: #666;
            outline: none;
        }

样式就是简单的美化了下界面，没什么特殊的效果

Javascript 结构

        var oimgView = document.getElementsByClassName("imgView")[0];
        var oimg = oimgView.getElementsByTagName("img")[0];
        var ochang = oimgView.getElementsByTagName("a")[0];
        var oclose = oimgView.getElementsByTagName("a")[1];
        var lables = document.getElementsByClassName("upBtn")[0];

        function imgChange() {
            var oinpt = document.getElementsByTagName("input")[0];
            var freader = new FileReader();
            var ofile = oinpt.files[0];

            // 存在文件时，执行这里的if
            if (oinpt.files[0]) {
                console.log(ofile.name);
                // 以dataURL读取图片，当完成时变更图片地址，并显示
                freader.readAsDataURL(ofile);
                freader.onload = function() {
                    oimg.src = this.result;
                    oimgView.style.display = "block";
                    lables.style.display = "none";
                }
            }
            // 选择时取消，或没有读到文件时，变更图片地址为空，并隐藏
            else {

                oimg.src = "";
                oimgView.style.display = "none";
                lables.style.display = "block";
            }
        }

        lables.onclick = function() {
            var oinpt = document.getElementsByTagName("input")[0];
            oinpt.click();
        }

        ochang.onclick = function() {
            var oinpt = document.getElementsByTagName("input")[0];
             // 模拟点击事件
            oinpt.click();
        }
        oclose.onclick = function() {
            oimg.src = "";
            oimgView.style.display = "none";
            lables.style.display = "block";
            // 删除lable里的input,只有这样才可以清楚里面的值
            lables.removeChild(lables.firstElementChild);
            // 创建新的input，并添加进lable
            var newNode = document.createElement("input");
            newNode.type = type = "file";
            newNode.accept = "image/*";
            newNode.hidden = "hidden";
            newNode.setAttribute("onchange", "imgChange()");
            lables.appendChild(newNode);
        }

功能性的Js里，关键的点在于imgChange函数里，通过判断files[0]的存在，来区分用户是点击了图片呢，还是点击了取消。（之前一直卡在这个上面，真是刻骨铭心啊！）这里用到了HTML5 的 web API FileReader，有兴趣的小伙伴可以百度了解下。