就如大家所知到的可以選擇文件的file類型按鈕，點擊按鈕即可以選擇文件寇蚊，文件選擇后旁邊會顯示文件名字棍好，但是這樣的原始樣式比較難看仗岸，且有些時候不需要那個文件名稱，所以，下面我們來詳細分析一下怎樣讓原始樣式變得更好看以及怎樣獲取文件信息业稼，我們以選取圖片為例低散。
改變樣式
<div id="box1">
<input type="file" onchange="upload(this)"/>
</div>
<input type="text" class="imgName" />
<img src="" id="oimg"/>
我們所更新的樣式如上圖所示朦蕴，左邊的圖形盒子點擊可以選擇圖片，右邊的部分填充為圖片的名字。
首先蚓胸，先讓左邊的正方形都可以為點擊就能選擇的狀態(tài)，所以讓選擇文件按鈕的長寬與正方形盒子的寬高相同除师，當(dāng)然沛膳，要想讓之前那個樣式消失，則把透明度設(shè)置為0即可。這時再設(shè)置盒子的背景圖片叹哭，居中顯示忍宋。
#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代碼 來獲取圖片的詳細信息。怎么知道當(dāng)前圖片的信息呢风罩，在file按鈕選中圖片時糠排，也就是onchange事件觸發(fā)時，我們用this傳入file按鈕這個對象用obj當(dāng)做形參超升，先來試一下obj.files,控制臺輸出的是FileList入宦，F(xiàn)ileList的具體內(nèi)容如下：
image.png
從這個圖中我們看到length為1，代表只有一張圖片室琢，還包括基本信息
name,size等,那么現(xiàn)在簡單了乾闰，只需要obj.files[0].name就可以知道圖片名字咯。我們簡單地以為圖片的路徑也會找到盈滴，上面顯示了一個
webkitRelativePath,谷歌瀏覽器相對路徑涯肩，但是是空的，這個時候不要怕巢钓，window.URL.createObjectURL(obj.files[0])就是在window.URL下有一個創(chuàng)建URL路徑的功能病苗，在括號內(nèi)寫入剛才的對象，就會解析出圖片的路徑症汹。
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
