HTML 上傳按鈕美化

方法：

1. 隱藏原本的上傳按鈕，另外做一個按鈕。
2. 點擊另外做的按鈕時，觸發原本上傳按鈕的點擊事件。
3. 選擇完上傳檔案後，另外顯示選擇檔案的檔名。

[做法1]
用<label></label>標籤，讓另外做的按鈕能觸發原本上傳按鈕的動作。

<input id="xyzFileUp" class="xyzFileUp" type="file" name="ff" style="display:none">
<label for="xyzFileUp" class="xyzFileUpSel">選擇檔案(另外做的按鈕)</label>
<div class="xyzFileUpFileName">
未選擇檔案
</div>

<script>
//顯示選擇的上傳檔案檔名
$(".xyzFileUp").on("change", function () {
    var filePath = $(this).val();
    var arr = filePath.split('\\');
    var fileName = arr[arr.length - 1];
    $(".xyzFileUpFileName").html(fileName);
});
</script>

[做法2]
用JS，讓另外做的按鈕能觸發原本上傳按鈕的動作。

<input id="xyzFileUp" class="xyzFileUp" type="file" name="ff" style="display:none">
<div class="xyzFileUpSel">選擇檔案(另外做的按鈕)</div>
<div class="xyzFileUpFileName">
未選擇檔案
</div>

<script>
//觸發原本上傳按鈕
$('.xyzFileUpSel').click(function () {
    document.getElementById("xyzFileUp").click();
    //$("#xyzFileUp").click();
});
//顯示選擇的上傳檔案檔名
$(".xyzFileUp").on("change", function () {
    var filePath = $(this).val();
    var arr = filePath.split('\\');
    var fileName = arr[arr.length - 1];
    $(".xyzFileUpFileName").html(fileName);
});
</script>

參考：
css input[type=file] 样式美化，input上传按钮美化
自訂 Input File 檔案上傳按鈕 CSS 最佳解法﹍實作範例＠WFU BLOG
html - Styling an input type="file" button - Stack Overflow
在網頁應用程式中使用本地檔案 - Web APIs | MDN::使用click() 方法隱藏檔案輸入元素
HTMLElement.click() - Web APIs | MDN