input中的file类型

就如大家所知到的可以选择文件的file类型按钮，点击按钮即可以选择文件，文件选择后旁边会显示文件名字，但是这样的原始样式比较难看，且有些时候不需要那个文件名称，所以，下面我们来详细分析一下怎样让原始样式变得更好看以及怎样获取文件信息，我们以选取图片为例。

改变样式

<div id="box1">
<input type="file" onchange="upload(this)"/>
</div>
<input type="text" class="imgName" />
<img src="" id="oimg"/>

image.png

我们所更新的样式如上图所示，左边的图形盒子点击可以选择图片，右边的部分填充为图片的名字。
首先，先让左边的正方形都可以为点击就能选择的状态，所以让选择文件按钮的长宽与正方形盒子的宽高相同，当然，要想让之前那个样式消失，则把透明度设置为0即可。这时再设置盒子的背景图片，居中显示。

        #box1{
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            background: url(img/picture-new.png) no-repeat center;
        }
        #box1 input{
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        img{
            margin: 50px;
        }
        .imgName{
            float: left;
            width: 120px;
            height: 46px;
        }

下面分析js代码 来获取图片的详细信息。怎么知道当前图片的信息呢，在file按钮选中图片时，也就是onchange事件触发时，我们用this传入file按钮这个对象用obj当做形参，先来试一下obj.files,控制台输出的是FileList，FileList的具体内容如下：

image.png
从这个图中我们看到length为1，代表只有一张图片，还包括基本信息name,size等,那么现在简单了，只需要obj.files[0].name就可以知道图片名字咯。
我们简单地以为图片的路径也会找到，上面显示了一个webkitRelativePath,谷歌浏览器相对路径，但是是空的，这个时候不要怕，window.URL.createObjectURL(obj.files[0])就是在window.URL下有一个创建URL路径的功能，在括号内写入刚才的对象，就会解析出图片的路径。

        function upload(obj){
//              obj.files可以获取全部文件列表
                var img_name=document.getElementsByClassName('imgName')[0];
                img_name.value=obj.files[0].name;
                var img=document.getElementById('oimg');
                oimg.src=window.URL.createObjectURL(obj.files[0]);
            }

最后，附上一张丑丑的示例，哈哈哈

image.png