1. 程式人生 > 其它 >修改檔案上傳按鈕 文字及樣式

修改檔案上傳按鈕 文字及樣式

選中內容

<button style="padding: 10px; border-radius: 10px; color: white; background-color: #008de4;" type="button">上傳檔案</button> 
<span class="select_title">選中內容</span></p>
<script>
    $(function () {
        // button的單擊事件
        $('.select_file').click(function () {
            // 啟動檔案選擇
            $("#hiddenFile1").click();
            return false;
        });
        $("#hiddenFile1").change(function () {

            if ($(this).val() == "") {
                $('#file_val1').html("No file chosen");
                $(this).focus();
                return;
            } else {
                $('#file_val1').html($(this).val());
                $('.select_title').html(this.files[0].name)
            }
        })
        $("#hiddenFile1").blur(function () {

            if ($(this).val() == "") {
                $('#file_val1').html("No file chosen");
                $(this).focus();
                return;
            } else {
                $('#file_val1').html($(this).val());
                $('.select_title').html(this.files[0].name)
            }
        })
    });
    
</script>