input type="flie" 图片上传 预览

隐藏input控件透明度opacity=0的办法，

图片的预览实现原理使用了javascript里的createObjectURL方法。

css部分：

<style type="text/css">     * {        margin: 0;        padding: 0;        list-style: none;    }    body {        position: relative;    }    span {        display: inline-block;        width : 90px;        height: 35px;        line-height: 35px;        border: 1px solid #ccc;        border-radius: 5px;        text-align: center;    }    input[type="file"] {        width: 100px;        height: 40px;        position: absolute;        top: 0;         left: 0;        z-index: 100;        opacity: 0;    }    div {         width: 200px;        height: 100px;        overflow: hidden;     }     div img {         width: 100%;         height: 100%;     }</style> 

HTML部分

<span>选择文件</span>    <input type="file" onchange="handleFiles(this.files,this.nextElementSibling)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">    <div></div>

JavaScript部分

<script>    function handleFiles(file,obj) {        //获取当前点击的元素的所有同级元素的html内容        var con = obj.innerHTML;        //判断当前点击元素内是否已经存在img图片元素，如果有则先全部清除后再添加，如果没有就直接添加        if (con.indexOf("img") > 0) {            //获取obj中的img            var pic = obj.getElementsByTagName("img")[0];            //移除该图片            obj.removeChild(pic);            //调用添加img图片的函数            creatImg();        } else {            creatImg();        }        function creatImg() {            //创建一个img元素            var img = document.createElement("img");            //设置img元素的源文件路径，window.URL.createObjectURL() 方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里            img.src = window.URL.createObjectURL(file[0]);            //window.URL.revokeObjectURL() 释放一个通过URL.createObjectURL()创建的对象URL，在图片被显示出来后，我们就不再需要再次使用这个URL了，因此必须要在加载后释放它            img.onload = function() {                window.URL.revokeObjectURL(this.src);            }            //在当前点击的input元素的div中添加刚刚创建的img图片元素            obj.appendChild(img);        }    }</script>