文件上传按钮优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .file-box{ position:relative;340px;margin:20px;}
        .txt{ height:28px;line-height:28px; border:1px solid #cdcdcd; 180px;}
        .update{70px; color:#fff;background-color:#3598dc; border:0 none;height:28px; line-height:16px!important;cursor:pointer;}
        .update:hover{background-color:#63bfff;color:#fff;}
        .file{ position:absolute; top:0; right:85px; height:30px;line-height:30px; filter:alpha(opacity:0);opacity: 0;254px }
    </style>
</head>
<body>
   <div class="file-box">
        <form id="uploadForm">
            <input type="text" id="textfield" class="txt" />
            <input type="button" class="update" value="上传文件" />
            <input type="file" name="file" class="file" id="fileField" onchange="document.getElementById('textfield').value=this.files[0].name"/>
        </form>
    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/whkzm/p/13902020.html