方法：
- 隱藏原本的上傳按鈕，另外做一個按鈕。
- 點擊另外做的按鈕時，觸發原本上傳按鈕的點擊事件。
- 選擇完上傳檔案後，另外顯示選擇檔案的檔名。
用<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
