用Button更换文件上传控件的样式

40 阅读 0 评论 27 点赞

我是靠谱客的博主酷酷钻石，最近开发中收集的这篇文章主要介绍用Button更换文件上传控件的样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

用Button更换文件上传控件的样式

文件上传原始控件

在这里插入图片描述

更换为Button后：

在这里插入图片描述
注意：大家可以根据自己的喜好更改button和lable的样式

JSP文件

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>文件上传按钮美化</title>
  </head>
  <body>
    <div>
      <table id="file-tab">
        <tr>
          <td style="width : 300px;background: #f1f3f4">
            <lable id="filePath" style="width : 100%; text-align: left"></lable>
          </td>
          <td>
            <input type="file" style="width : 100%;display: none" onchange="updFilePath(this)" name="file">
            <button type="button" style="width : 100%" onclick="selectFile(this)">&nbsp选择文件</button>
          </td>
        </tr>
      </table>
    </div>
    <%--此处可选择引入自己项目中的jquery.min.js文件--%>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      /* 选择文件 */
      function selectFile(obj){
        var filePicker =  obj.previousElementSibling;//获取obj的上一个兄弟节点<input type="file"...>
        filePicker.click();//为filePicker绑定click()事件
      }
      /* 将文件路径更新到lable控件中 */
      function updFilePath(obj){
        var lable = $("#filePath");
        lable.html(obj.value);
      }
    </script>
  </body>
</html>