在進行文件上傳得過程中，通常需要用到input file 標籤，但是由於其默認的表單元素醜陋的外觀，今天我在做上傳的時候，也遇到了這個問題，真心太醜，和周圍的其他表單元素，完全是格格不入啊。於是就想深入學習了解下，然後找到了比較簡單的方法。其實很簡單，就是透過label標籤與input標籤綁定，隱藏input標籤，給label標籤或label裡面的標籤的設定樣式：
<form action="" method="" enctype='multipart/form-data'>
<label for='my_file' class='inputlabelBox'>
<p class="inputBox">点击上传文件</p>
</label>
<input type="file" name="myfile" id='my_file' style="display:none;" />
</form>
<img src="" id="img" width="300" />在透過Js上傳圖片預覽後：
var inputlabelBox = document.querySelector('.inputlabelBox');
var my_file = document.querySelector('#my_file');
var img = document.querySelector('#img');
my_file.onchange = function()
{
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function()
{
img.src = this.result;
}
}相關建議：
#以上是js修改input file標籤樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
