前端实现上传本地图片并可以预览 

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .photo {
                width: 100px;
                height: 100px;
                float: left;
                margin-right: 10px;
            }
            .pic{
                margin-left: 120px;
            }
            
            .pic .photo img {
                width: 100%;
                height: 100%;
            }
            
            input[type="file"] {
                opacity: 0;
            }
            
            .container img.select {
                position: fixed;
                left: 0;
                top: 20px;
            }
        </style>
</head>
<div class="container">
    <input type="file" id="file_input" multiple/>
    <img class="select" src="../img/upload_icon.png" />
    <div class="pic">

    </div>
</div>
<script type="text/javascript">
        window.onload = function() {
            var input = document.getElementById("file_input");
            var result, div;

            if(typeof FileReader === 'undefined') {
                result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
                input.setAttribute('disabled', 'disabled');
            } else {
                input.addEventListener('change', readFile, false);
            }

            function readFile() {
                for(var i = 0; i < this.files.length; i++) {
                    if(!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　　
                        //判断上传文件格式
                        alert("上传的图片格式不正确，请重新选择");　　　　　　　　　　
                    }
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[i]);
                    reader.onload = function(e) {
                        result = '<img src="' + this.result + '" alt=""/>';
                        div = document.createElement('div');
                        div.className = 'photo'
                        div.innerHTML = result;
                        document.querySelector('.pic').appendChild(div);　　 //插入dom树                      　　　　　　　　}
                    }
                }
            }

            //
            var select = document.querySelector(".container .select");
            select.onclick = function() {
                $("#file_input").trigger("click");
            }
        }
</script>

 

posted @ 2019-03-18 16:23  氧化成风  阅读(1113)  评论(0)    收藏  举报