js修改input file標籤樣式的方法

在進行文件上傳得過程中，通常需要用到input file 標籤，但是由於其默認的表單元素醜陋的外觀，今天我在做上傳的時候，也遇到了這個問題，真心太醜，和周圍的其他表單元素，完全是格格不入啊。於是就想深入學習了解下，然後找到了比較簡單的方法。其實很簡單，就是透過label標籤與input標籤綁定，隱藏input標籤，給label標籤或label裡面的標籤的設定樣式：

<form action="" method="" enctype=&#39;multipart/form-data&#39;>
   <label for=&#39;my_file&#39; class=&#39;inputlabelBox&#39;>
           <p class="inputBox">点击上传文件</p>
    </label>
    <input type="file" name="myfile" id=&#39;my_file&#39; 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上傳檔案的內容程式碼

#input file上傳圖片預覽功能實例程式碼

input file取得檔案根目錄簡單實作_PHP教學

#

以上是js修改input file標籤樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！