html_将按钮和文件输入框合并在一起 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="代码测试.aspx.cs" Inherits="代码测试" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
       
        #excelFileInput {
            display: none; /* 隐藏原始的文件输入框 */
        }

        #customFileInput {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <!-- 将按钮和文件输入框合并在一起 -->
    <label for="excelFileInput" id="customFileInput">选择 Excel 文件</label>
    <input type="file" id="excelFileInput" accept=".xls, .xlsx" />

    <!-- 将按钮和文件输入框合并在一起 -->
    <script>
        document.getElementById('excelFileInput').addEventListener('change', function () {
            var fileInput = document.getElementById('excelFileInput');
            var file = fileInput.files[0];

            if (file) {
                // 执行处理 Excel 文件的逻辑，可以使用第三方库如 SheetJS 等
                // 这里只是一个示例，实际情况中可能需要更复杂的处理
                alert('已选择文件: ' + file.name);
            } else {
                alert('请先选择文件');
            }
        });
    </script>
</body>
</html>

 

 
posted @ 2024-02-24 16:22  AutomationAnywhere  阅读(77)  评论(0)    收藏  举报