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" οnchange="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>